字符串填充方法：padStart 和 padEnd

ES8 (ECMAScript 2017) 引入了两个实用的字符串方法：padStart() 和 padEnd()，它们为字符串处理带来了更多便利性。这两个方法允许开发者在字符串的开头或结尾填充指定的字符，直到字符串达到指定的长度。

方法概述

padStart(targetLength, padString)

padStart() 方法会在当前字符串的开头填充指定字符串（默认为空格），直到达到目标长度。

javascript 复制代码

'abc'.padStart(10);         // "       abc"
'abc'.padStart(10, "foo");  // "foofoofabc"
'abc'.padStart(6, "123465"); // "123abc"
'abc'.padStart(8, "0");     // "00000abc"
'abc'.padStart(1);          // "abc"

padEnd(targetLength, padString)

padEnd() 方法与 padStart() 类似，不同之处在于它是在字符串的末尾进行填充。

javascript 复制代码

'abc'.padEnd(10);          // "abc       "
'abc'.padEnd(10, "foo");   // "abcfoofoof"
'abc'.padEnd(6, "123456"); // "abc123"
'abc'.padEnd(1);           // "abc"

参数说明

targetLength：当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
padString（可选）：填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的默认值为空格（" "）。

实际应用场景

1. 数字格式化

javascript 复制代码

// 数字前补零
const number = 42;
console.log(number.toString().padStart(5, '0')); // "00042"

// 货币格式化
const amount = "12";
console.log(amount.padStart(5, ' ')); // "   12"

2. 对齐文本输出

javascript 复制代码

const data = [
  { name: 'John', score: 92 },
  { name: 'Alice', score: 100 },
  { name: 'Bob', score: 87 }
];

data.forEach(item => {
  console.log(
    item.name.padEnd(10, '.') + 
    item.score.toString().padStart(3, ' ')
  );
});
// 输出:
// John...... 92
// Alice.....100
// Bob....... 87

3. 固定长度显示

javascript 复制代码

// 显示固定长度的ID
const id = "123";
console.log(`ID: ${id.padStart(6, 'X')}`); // "ID: XXX123"

// 隐藏部分银行卡号
const cardNumber = "4111111111111111";
const lastFour = cardNumber.slice(-4);
console.log(lastFour.padStart(cardNumber.length, '*')); // "************1111"

注意事项

非字符串参数：如果 padString 不是字符串，会先尝试转换为字符串。
javascript 复制代码
```
'abc'.padStart(10, 123); // "1231231abc"
```
Unicode 字符：对于包含双字节字符（如中文）的字符串，length 属性可能不准确，填充时需要注意。
性能考虑：对于大量或复杂的填充操作，可能需要考虑性能影响。

浏览器兼容性

padStart() 和 padEnd() 在现代浏览器中得到了广泛支持，包括 Chrome、Firefox、Edge 和 Safari。对于不支持的环境，可以使用 polyfill 或 Babel 转译。

总结

ES8 引入的 padStart() 和 padEnd() 方法为字符串处理提供了简洁而强大的工具，特别适用于格式化、对齐和固定长度显示等场景。它们不仅提高了代码的可读性，还减少了手动处理字符串填充的复杂性，是现代 JavaScript 开发中值得掌握的实用方法。