ECMAScript 2019 中的字符串操作技巧：padStart 和 padEnd 的使用场景？

在编写前端应用程序时，我们通常需要处理各种字符串。ECMAScript 2019 引入了两个新的字符串方法：String.prototype.padStart() 和 String.prototype.padEnd() 来增强字符串的格式化和对齐功能。在本文中，我们将深入探讨这两个方法的使用场景，并提供示例代码来帮助你更好地理解它们。

padStart() 方法

padStart() 是一个字符串方法，用于将字符添加到原始字符串的开头，直到字符串达到指定长度。该方法需要两个参数：第一个参数指定期望的最终长度，第二个参数是用于填充字符串的字符。

以下是 padStart() 方法的使用示例：

const str = '123';
const paddedStr = str.padStart(5, '0');
console.log(paddedStr); // 输出 "00123"

在上面的示例中，padStart() 将 '0' 字符填充到原始字符串的开头，直到字符串长度为 5，因此输出结果为 "00123"。

另一个值得注意的地方是，在传入非字符串类型的填充字符时，会自动转换为字符串方式的填充字符，如下所示：

const num = 5;
const paddedNum = num.toString().padStart(2, '0');
console.log(paddedNum); // 输出 "05"

在上述示例中，数字类型的 num 变量先进行了字符串类型转换，然后使用 padStart() 将 '0' 字符填充到开头，直到字符串长度为 2，输出结果为 "05"。

padEnd() 方法

padEnd() 方法与 padStart() 方法非常相似，不同之处在于它将填充字符添加到原始字符串的末尾，而不是开头。padEnd() 方法也需要两个参数：期望的最终长度和用于填充的字符。

以下是 padEnd() 方法的使用示例：

const str = 'hello';
const paddedStr = str.padEnd(10, '-');
console.log(paddedStr); // 输出 "hello-----"

在上面的示例中，padEnd() 将 '-' 字符填充到原始字符串的结尾，直到字符串长度为 10，因此输出结果为 "hello-----"。

如同 padStart() 方法一样，如果传入非字符串类型的填充字符，它也会自动转换为字符串格式：

const num = 5;
const paddedNum = num.toString().padEnd(2, '0');
console.log(paddedNum); // 输出 "50"

在上述示例中，数字类型的 num 变量先通过 toString() 方法将其转换为字符串类型，然后使用 padEnd() 方法将字符 '0' 添加到字符串末尾，直到字符串长度为 2，输出结果为 "50"。

使用场景

下面列出了 padStart() 和 padEnd() 方法的一些使用场景：

• 通过填充 0 字符来格式化日期和时间数据；
• 对于可变长度的单元格，将数字值对齐到列的右侧；
• 版本号对齐：在版本号中使用 . 字符进行分隔，然后使用 padEnd() 方法将每个子版本号对齐到相同的字符宽度。

总结

本文介绍了 ECMAScript 2019 中的 padStart() 和 padEnd() 方法，并提供了示例代码以帮助你更好地理解它们的用法。这两个方法可以帮助我们轻松地格式化字符串，使其具有更好的可读性，并在开发 Web 应用程序时实现更优雅的界面设计。

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