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'

// 對齊輸出
var 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) 新增的方法。