在前端开发中，字符串的格式化是一个常见的需求。ES9 中新增了两个方法 String.prototype.padStart() 和 String.prototype.padEnd()，可以方便地设置字符串的格式。本文将详细介绍这两个方法的用法和示例，并给出一些学习和指导意义。
String.prototype.padStart()
String.prototype.padStart() 方法用于在字符串的开头添加指定的字符，以达到指定的长度。该方法接受两个参数：
targetLength：要达到的长度，如果当前字符串长度小于该值，则会在开头添加指定字符。padString：要添加的字符，默认为一个空格。
下面是一个简单的示例：
const str = '123'; const paddedStr = str.padStart(5, '0'); console.log(paddedStr); // 输出：00123
在上面的示例中，str 的长度为 3，我们希望它达到长度为 5，因此使用 padStart() 方法在开头添加了两个 0。
String.prototype.padEnd()
String.prototype.padEnd() 方法用于在字符串的结尾添加指定的字符，以达到指定的长度。该方法接受两个参数：
targetLength：要达到的长度，如果当前字符串长度小于该值，则会在结尾添加指定字符。padString：要添加的字符，默认为一个空格。
下面是一个简单的示例：
const str = '123'; const paddedStr = str.padEnd(5, '0'); console.log(paddedStr); // 输出：12300
在上面的示例中，str 的长度为 3，我们希望它达到长度为 5，因此使用 padEnd() 方法在结尾添加了两个 0。
深入理解
String.prototype.padStart() 和 String.prototype.padEnd() 方法的实现原理并不复杂。我们可以使用循环和字符串拼接的方式来模拟这两个方法的行为。
下面是一个模拟 padStart() 方法的示例：
-- -------------------- ---- ------- -------- ------------- ------------- --------- - - -- - -- ----------- -- ------------- - ------ ---- - ----- --------- - ------------ - ----------- ----- ------ - ------------------------------------ - ---------------------------- ----------- ------ ------ - ---- - ----- --- - ------ ----- --------- - ------------- -- ----- ----------------------- -- --------展开代码
在上面的示例中，我们先判断了原字符串的长度是否大于等于目标长度，如果是，则直接返回原字符串。否则，我们计算需要添加的字符的数量，然后使用 repeat() 方法将 padString 重复多次，最后使用 substr() 方法截取需要的字符。最后，我们将 padStr 和原字符串拼接起来，并返回结果。
下面是一个模拟 padEnd() 方法的示例：
-- -------------------- ---- ------- -------- ----------- ------------- --------- - - -- - -- ----------- -- ------------- - ------ ---- - ----- --------- - ------------ - ----------- ----- ------ - ------------------------------------ - ---------------------------- ----------- ------ --- - ------- - ----- --- - ------ ----- --------- - ----------- -- ----- ----------------------- -- --------展开代码
在上面的示例中，我们先判断了原字符串的长度是否大于等于目标长度，如果是，则直接返回原字符串。否则，我们计算需要添加的字符的数量，然后使用 repeat() 方法将 padString 重复多次，最后使用 substr() 方法截取需要的字符。最后，我们将原字符串和 padStr 拼接起来，并返回结果。
学习和指导意义
String.prototype.padStart() 和 String.prototype.padEnd() 方法是 ES9 中新增的两个方法，可以方便地设置字符串的格式。这两个方法的实现原理并不复杂，我们可以使用循环和字符串拼接的方式来模拟它们的行为。
在实际开发中，我们经常需要对字符串进行格式化，比如对日期、时间、金额等进行格式化。使用 String.prototype.padStart() 和 String.prototype.padEnd() 方法可以方便地实现这些需求，提高开发效率。
当然，这两个方法并不是万能的，有些需求可能需要使用其他方法来实现。比如，如果需要在字符串中间添加指定字符，可以使用 String.prototype.slice() 和 String.prototype.concat() 方法来实现。
总之，了解 String.prototype.padStart() 和 String.prototype.padEnd() 方法的用法和实现原理，可以帮助我们更好地进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cc3c0ee46428fe9e5627fe
