JavaScript String padStart()

padStart() 方法用來在字串的開頭填充指定的字元,直到達到指定的長度。

語法:

str.padStart(targetLength [, padString])
  • targetLength 是目標字串長度
  • padString 是用來填充的字串,預設是空格
  • 回傳填充後的新字串

用法:

'5'.padStart(3, '0'); // '005'
'42'.padStart(5, '0'); // '00042'
'abc'.padStart(6, '123'); // '123abc'
'abc'.padStart(10, '123'); // '1231231abc'
'abc'.padStart(6); // '   abc'(預設填充空格)

如果目標長度小於等於原字串長度,回傳原字串:

'abc'.padStart(3, '0'); // 'abc'
'abc'.padStart(2, '0'); // 'abc'

實際應用:

// 數字補零
function formatNumber(num, length) {
  return String(num).padStart(length, '0');
}

formatNumber(5, 3); // '005'
formatNumber(42, 5); // '00042'
formatNumber(123, 3); // '123'

// 格式化時間
function formatTime(hours, minutes, seconds) {
  return (
    String(hours).padStart(2, '0') +
    ':' +
    String(minutes).padStart(2, '0') +
    ':' +
    String(seconds).padStart(2, '0')
  );
}

formatTime(9, 5, 3); // '09:05:03'
formatTime(12, 30, 0); // '12:30:00'

// 格式化日期
function formatDate(year, month, day) {
  return year + '-' + String(month).padStart(2, '0') + '-' + String(day).padStart(2, '0');
}

formatDate(2024, 3, 5); // '2024-03-05'

// 對齊輸出
const items = [
  { name: 'Apple', price: 30 },
  { name: 'Banana', price: 150 },
  { name: 'Orange', price: 5 },
];

items.forEach(function (item) {
  console.log(item.name.padStart(10) + ': $' + String(item.price).padStart(5));
});
// '     Apple: $   30'
// '    Banana: $  150'
// '    Orange: $    5'
padStart() 是 ES2017 (ES8) 新增的方法。