在编写前端应用程序时，我们通常需要处理各种字符串。ECMAScript 2019 引入了两个新的字符串方法：String.prototype.padStart() 和 String.prototype.padEnd() 来增强字符串的格式化和对齐功能。在本文中，我们将深入探讨这两个方法的使用场景，并提供示例代码来帮助你更好地理解它们。
padStart() 方法
padStart() 是一个字符串方法，用于将字符添加到原始字符串的开头，直到字符串达到指定长度。该方法需要两个参数：第一个参数指定期望的最终长度，第二个参数是用于填充字符串的字符。
以下是 padStart() 方法的使用示例：
----- --- - ------ ----- --------- - --------------- ----- ----------------------- -- -- -------
在上面的示例中，padStart() 将 '0' 字符填充到原始字符串的开头，直到字符串长度为 5，因此输出结果为 "00123"。
另一个值得注意的地方是，在传入非字符串类型的填充字符时，会自动转换为字符串方式的填充字符，如下所示：
----- --- - -- ----- --------- - -------------------------- ----- ----------------------- -- -- ----
在上述示例中，数字类型的 num 变量先进行了字符串类型转换，然后使用 padStart() 将 '0' 字符填充到开头，直到字符串长度为 2，输出结果为 "05"。
padEnd() 方法
padEnd() 方法与 padStart() 方法非常相似，不同之处在于它将填充字符添加到原始字符串的末尾，而不是开头。padEnd() 方法也需要两个参数：期望的最终长度和用于填充的字符。
以下是 padEnd() 方法的使用示例：
----- --- - -------- ----- --------- - -------------- ----- ----------------------- -- -- ------------
在上面的示例中，padEnd() 将 '-' 字符填充到原始字符串的结尾，直到字符串长度为 10，因此输出结果为 "hello-----"。
如同 padStart() 方法一样，如果传入非字符串类型的填充字符，它也会自动转换为字符串格式：
----- --- - -- ----- --------- - ------------------------ ----- ----------------------- -- -- ----
在上述示例中，数字类型的 num 变量先通过 toString() 方法将其转换为字符串类型，然后使用 padEnd() 方法将字符 '0' 添加到字符串末尾，直到字符串长度为 2，输出结果为 "50"。
使用场景
下面列出了 padStart() 和 padEnd() 方法的一些使用场景：
- 通过填充
0字符来格式化日期和时间数据； - 对于可变长度的单元格，将数字值对齐到列的右侧；
- 版本号对齐：在版本号中使用
.字符进行分隔，然后使用padEnd()方法将每个子版本号对齐到相同的字符宽度。
总结
本文介绍了 ECMAScript 2019 中的 padStart() 和 padEnd() 方法，并提供了示例代码以帮助你更好地理解它们的用法。这两个方法可以帮助我们轻松地格式化字符串，使其具有更好的可读性，并在开发 Web 应用程序时实现更优雅的界面设计。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/651a920f95b1f8cacd275e20