在 JavaScript 中，字符串是一种常见的数据类型。ES10 中新增了 String.prototype.padStart() 和 String.prototype.padEnd() 方法，可以方便地在字符串的开头或结尾填充指定长度的字符。
1. String.prototype.padStart()
String.prototype.padStart() 方法会在原字符串的开头填充指定长度的字符，直到达到指定的长度为止。该方法接受两个参数：第一个参数是填充后字符串的总长度，第二个参数是用于填充的字符，默认为 " "。
const str = "123"; const paddedStr = str.padStart(5, "0"); // "00123"
在上面的例子中，str 的长度为 3，通过 padStart() 方法填充 "0"，使其总长度为 5。
2. String.prototype.padEnd()
String.prototype.padEnd() 方法会在原字符串的结尾填充指定长度的字符，直到达到指定的长度为止。该方法接受两个参数：第一个参数是填充后字符串的总长度，第二个参数是用于填充的字符，默认为 " "。
const str = "123"; const paddedStr = str.padEnd(5, "0"); // "12300"
在上面的例子中，str 的长度为 3，通过 padEnd() 方法填充 "0"，使其总长度为 5。
3. 应用场景
3.1. 对齐输出
使用 padStart() 和 padEnd() 方法可以方便地对齐输出。比如，可以将一组数据输出成表格的形式。
const data = [
{ name: "Jack", age: 25, score: 85 },
{ name: "Lucy", age: 22, score: 90 },
{ name: "Tom", age: 27, score: 80 }
];
for (let i = 0; i < data.length; i++) {
const { name, age, score } = data[i];
const paddedName = name.padStart(8, " ");
const paddedAge = age.toString().padEnd(4, " ");
const paddedScore = score.toString().padEnd(6, " ");
console.log(`${paddedName}${paddedAge}${paddedScore}`);
}在上面的例子中，输出的每一行都包含了姓名、年龄和分数三个字段，使用 padStart() 和 padEnd() 方法使得每个字段的长度都相同，方便对齐输出。
3.2. 表单验证
使用 padStart() 和 padEnd() 方法可以方便地进行表单验证。比如，可以验证银行卡号是否符合格式要求。
function validateBankCardNumber(cardNumber) {
const regex = /^(\d{4}\s){3}\d{4}$/;
const strippedCardNumber = cardNumber.replace(/\s/g, "");
const paddedCardNumber = strippedCardNumber.padEnd(16, "0");
return regex.test(paddedCardNumber);
}
console.log(validateBankCardNumber("1234 5678 9012 345")); // false
console.log(validateBankCardNumber("1234 5678 9012 3456")); // true在上面的例子中，首先去除银行卡号中的空格，然后使用 padEnd() 方法在结尾填充 "0"，使其总长度为 16。最后使用正则表达式验证格式是否正确。
4. 总结
String.prototype.padStart() 和 String.prototype.padEnd() 方法是 ES10 中新增的字符串方法，可以方便地在字符串的开头或结尾填充指定长度的字符。这些方法可以应用于对齐输出、表单验证等场景，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658a7a31eb4cecbf2dfa6881