在前端开发中，我们经常需要对字符串进行格式化。在 ES8 中，新增了两个字符串填充方法 padStart 和 padEnd，可以帮助我们更方便地处理字符串格式问题。
padStart 和 padEnd 方法
padStart 和 padEnd 方法都接收两个参数：第一个参数是填充后的字符串总长度，第二个参数是用于填充的字符串。
以 padStart 方法为例：
----------------- ---- -- --------
这个例子中，'abc' 被填充为长度为 6 的字符串，填充用的字符串是 '0'。
padEnd 方法的用法和 padStart 类似，只是填充的位置不同。
--------------- ---- -- --------
深入了解 padStart 和 padEnd 方法
padStart 和 padEnd 方法可以帮助我们解决字符串格式问题，但是它们的实现原理是什么呢？
padStart 和 padEnd 方法的实现都是基于 Unicode 字符编码的。当填充用的字符串长度不足时，会重复这个字符串，直到填充完为止。如果填充用的字符串长度超过了总长度，会截取字符串的一部分作为填充用的字符串。
例如，当填充用的字符串是 '你好'，总长度是 6 时：
----------------- ----- -- --------
这个例子中，填充用的字符串 '你好' 长度为 2，不足以填充到总长度 6，因此会重复这个字符串，直到填充完为止。
padStart 和 padEnd 方法的应用
padStart 和 padEnd 方法可以应用到很多场景中，例如：
1. 数字前置填充
当我们需要将数字格式化为固定长度的字符串时，可以使用 padStart 方法。
----- --- - --- ----- --- - -------------------------- ---- ---------------- -- -------
这个例子中，数字 123 被转换为字符串 '123'，然后使用 padStart 方法将其填充为长度为 5 的字符串。
2. 表格对齐
当我们需要在控制台输出表格时，可以使用 padEnd 方法将字符串对齐。
----- ---- - - - ----- ------ ---- --- -------- --------- -- - ----- -------- ---- --- -------- ---------- -- - ----- ------- ---- --- -------- ----------- - - --------------------------------- ----------------- -- - ------------------------------------------------------------------------------------ --
这个例子中，我们使用 padEnd 方法将每个字符串对齐，输出一个简单的表格。
总结
ES8 中新增的 padStart 和 padEnd 方法可以帮助我们更方便地处理字符串格式问题。它们的实现原理是基于 Unicode 字符编码的，可以应用到很多场景中，例如数字前置填充和表格对齐。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/658174a6d2f5e1655dcaf16c