JavaScript String padEnd()

padEnd() 方法用來在字串的結尾填充指定的字元，直到達到指定的長度。

語法：

str.padEnd(targetLength [, padString])

• targetLength 是目標字串長度
• padString 是用來填充的字串，預設是空格
• 回傳填充後的新字串

用法：

'abc'.padEnd(6, '.');      // 'abc...'
'abc'.padEnd(10, '123');   // 'abc1231231'
'abc'.padEnd(6);           // 'abc   '（預設填充空格）
'abc'.padEnd(5, '12345');  // 'abc12'

如果目標長度小於等於原字串長度，回傳原字串：

'abc'.padEnd(3, '.');  // 'abc'
'abc'.padEnd(2, '.');  // 'abc'

實際應用：

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

items.forEach(function(item) {
    console.log(item.name.padEnd(10, '.') + '$' + item.price);
});
// 'Apple.....$30'
// 'Banana....$150'
// 'Orange....$5'

// 建立固定長度的字串
function createFixedString(str, length) {
    return str.padEnd(length, ' ');
}

createFixedString('Hello', 10);  // 'Hello     '

// 產生進度條
function progressBar(percent) {
    var filled = Math.round(percent / 5);
    var empty = 20 - filled;
    return '[' + '='.repeat(filled).padEnd(20, ' ') + '] ' + percent + '%';
}

progressBar(0);    // '[                    ] 0%'
progressBar(50);   // '[==========          ] 50%'
progressBar(100);  // '[====================] 100%'

padStart() vs padEnd()：

// padStart 從開頭填充
'5'.padStart(3, '0');   // '005'

// padEnd 從結尾填充
'5'.padEnd(3, '0');     // '500'