深度剖析 ES8 中的 String.prototype.padStart() 和 String.prototype.padEnd() 方法

在 ECMAScript 2017 中，String 对象新增了两个方法：String.prototype.padStart() 和 String.prototype.padEnd()。这两个方法提供了字符串填充功能，可以方便地实现字符串对齐的效果。本文将深度剖析这两个方法的使用方法、实现原理和注意事项。

基本用法

padStart() 和 padEnd() 的基本语法分别是：

str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])

其中，targetLength 指定了填充后字符串的长度，padString 是可选参数，指定用于填充的字符串，如果不显式指定则默认用空格字符 " " 来填充。如果实际字符串长度已经大于或等于 targetLength，则不会进行填充。

举个例子，我们可以这样使用 padStart() 和 padEnd() 方法：

const str = 'hello'
const paddedStr1 = str.padStart(10, '-'); // '-----hello'
const paddedStr2 = str.padEnd(10, '-');   // 'hello-----'

上述代码中，我们实现了将字符串填充为长度为 10 的字符串，填充字符为 -。

实现原理

padStart() 和 padEnd() 的实现原理是利用了字符串重复的内置方法 String.prototype.repeat()。

例如，当我们希望将字符串 str 填充为长度为 targetLength 时，可以这样实现：

const padString = '-'.repeat(targetLength - str.length)
const paddedStr = padString + str

上述代码中，repeat() 方法将 - 字符串重复 (targetLength - str.length) 次，生成一个长度为 (targetLength - str.length) 的字符串，最后用该字符串作为填充字符填充到字符串 str 前面即可。

注意事项

在使用 padStart() 和 padEnd() 方法时，需要注意以下几个问题：

• targetLength 参数必须是一个整数，否则会自动转换为整数。
• 如果 padString 的长度不足以填充字符串到 targetLength，则会不停地重复 padString 直到填充满为止。
• padString 如果是一个空字符串，则不会进行填充。

总结

padStart() 和 padEnd() 方法为我们提供了一种方便地实现字符串填充的方式，通过将字符串填充为指定长度，可以方便地实现字符串对齐的效果。在使用时需要注意参数的传递以及注意填充字符的长度和空字符串的情况。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6489714648841e98947ba3fb