随着 JavaScript 的不断更新，ES10中新增了String.prototype.padStart()和String.prototype.padEnd()方法，用于字符串的填充操作。在这篇文章中，我们将深入讨论这两个方法的用法、作用和注意事项，并提供一些实用的示例代码供大家参考。
String.prototype.padStart()
String.prototype.padStart()方法用于在字符串的前面添加填充字符串，使得字符串达到指定的长度。该方法接受两个参数：padLength和padString，分别表示填充后的字符串长度和用于填充的字符串。如果省略第二个参数，则默认使用空格字符。
let str = "hello world"; str.padStart(15); // " hello world" str.padStart(15, "x"); // "xxxxhello world"
在上面的示例中，第一行代码在字符串 "hello world" 的前面使用空格字符添加了 4 个字符，使得字符串达到了 15 个字符的长度。第二行代码则是使用字符串 "x" 进行填充。
除了填充长度，String.prototype.padStart()方法还可以应用于日期格式化、数字格式化等场景。
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
let formattedDate = `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
// "2022-04-13"在上面的示例中，我们使用了 String.prototype.padStart() 方法来格式化日期中的月份和日期，使得它们按照两位数的格式显示。
String.prototype.padEnd()
与 String.prototype.padStart() 方法相似，String.prototype.padEnd()方法用于在字符串的后面添加填充字符串，使得字符串达到指定的长度。该方法同样接受两个参数：padLength和padString，分别表示填充后的字符串长度和用于填充的字符串。如果省略第二个参数，则默认使用空格字符。
let str = "hello world"; str.padEnd(15); // "hello world " str.padEnd(15, "x"); // "hello worldxxxx"
在上面的示例中，第一行代码在字符串 "hello world" 的后面使用空格字符添加了 4 个字符，使得字符串达到了 15 个字符的长度。第二行代码则是使用字符串 "x" 进行填充。
与 String.prototype.padStart() 方法相同，String.prototype.padEnd()方法同样可应用于日期格式化、数字格式化等场景。
let amount = 100.5;
let formattedAmount = `$${amount.toFixed(2).padStart(8)}`
// "$ 100.50"在上面的示例中，我们使用 String.prototype.padStart() 方法对金额进行格式化，插入两个空格字符，使得金额数字总共有 8 个字符的长度。
注意事项
- String.prototype.padStart()和String.prototype.padEnd()方法返回的是新的字符串，不会更改原始字符串本身。
- padLength参数为负数时，会抛出RangeError。
- padString参数为非字符串类型时，会自动转换为字符串类型进行处理。
- padLength小于或等于原始字符串的长度时，不会进行填充，直接返回原字符串。
结论
String.prototype.padStart()和String.prototype.padEnd()方法是非常实用的字符串填充操作，可以应用于多种格式化场景。在使用这两个方法时，需要注意参数的类型和范围，避免出现意外错误。希望本文能够帮助读者更好地理解和应用这两个方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676f0083e9a7045d0d6f8d71