ES9 中新增的字符串原型方法 padStart 和 padEnd 的使用实践
在 ES9 中，为了让字符串拼接更加方便，新增了两种字符串原型方法：padStart 和 padEnd。
padStart 和 padEnd 的主要作用是在字符串的头部和尾部填充指定的字符，使得字符串达到指定长度。其中，padStart 用于在字符串头部填充，padEnd 则是在字符串尾部填充。
下面我们来看一些使用示例和技巧。
填充字符串以达到指定长度
假设我们需要让一个字符串达到指定长度，但是如果字符串长度不够，我们需要在字符串头部或尾部填充指定字符，以达到指定长度。
例如，我们需要让字符串 "hello" 的长度达到 10，用 * 号填充，则可以使用 padStart 方法：
----- --- - -------- ----- --------- - ---------------- ----- ----------------------- -- ------------
这里的第一个参数是字符串的目标长度，第二个参数是用于填充的字符。也可以只提供填充字符，这样就可以使用默认长度来填充字符串：
----- --- - -------- ----- --------- - ----------------- ----------------------- -- - ------ --- ------ ------ --------
同样的效果也可以用 padEnd 方法实现：
----- --- - -------- ----- --------- - -------------- ----- ----------------------- -- ------------
填充字符串时注意长度
当我们填充字符串时，需要注意目标长度的设置，否则可能会导致填充不足或填充过多。
例如，下面的代码想要用 # 号填充字符串达到 6 个字符的长度：
----- --- - ----- ----- --------- - ------------- ----- ----------------------- -- --------
但是，由于填充字符 # 的长度为 1，填充 4 个 # 号只能达到 4 个字符的长度，不足目标长度，因此需要在填充字符后面再添加 2 个 # 号：
----- --- - ----- ----- --------- - ------------- ------ ----------------------- -- --------
同样的效果可以用 padStart 实现。
填充数字
padStart 和 padEnd 不仅可以用于填充字符串，还可以用于填充数字。例如，我们需要输出一段数字序列：
--- --- --- ---
可以用 padStart 方法来实现：
--- ---- - - -- - -- --- ---- - ----- ------ - ------------------------ ----- -------------------- -
这里的目标长度是 3，填充字符是 0。
填充二进制表示
当我们需要输出一段二进制数列时，padStart 方法也可以派上用场。
例如，我们需要输出 0 到 10 的二进制表示：
--- ---- - - -- - -- --- ---- - ----- --------- - ------------------------- ----- ----------------------- -
这里的 toString(2) 将数字转为了二进制字符串，目标长度是 4，填充字符是 0。
按长度截取字符串
padStart 和 padEnd 还可以配合 slice 方法一起使用，来实现按照长度截取字符串的操作。例如，下面的代码将一个字符串分成两段，第一段长度为 3，第二段长度为 7：
----- --- - ------- -------- ----- --------- - ----------------------- -- - - - - --------------------------- ----------------------- -- ---- -----
这里的 padEnd 和 padStart 分别用于将原字符串头部和尾部填充指定字符，然后再使用 slice 方法按照长度截取所需的部分。
总结
ES9 中新增的字符串原型方法 padStart 和 padEnd 可以极大地简化字符串拼接的操作，不仅可以用于填充字符串长度，还可以用于填充数字和二进制表示。但是在使用过程中需要注意目标长度的设置，否则可能会填充不足或填充过多。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65ab3c68add4f0e0ff4dc325