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) 新增的方法。