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'

實際應用：

// 對齊表格輸出
const 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) {
  const filled = Math.round(percent / 5);
  const 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'