了解 ECMAScript 2020 中的字符串填充函数 String.prototype.padStart() 和 String.prototype.padEnd()
在现代的 Web 开发中，字符串的处理是非常常见的操作，其中字符串填充就是一项很重要的功能。因此，ECMAScript 2020 中新增加的字符串填充函数 String.prototype.padStart() 和 String.prototype.padEnd() 就成为了前端开发中不可或缺的一部分。
String.prototype.padStart() 方法可以在字符串前面填充指定的字符，使其达到规定的长度。而String.prototype.padEnd() 方法则可以在字符串后面填充指定的字符，使其达到规定的长度。这两种填充方式非常方便，可以在日常开发中提升效率。
下面来详细介绍一下这两个方法。
- String.prototype.padStart()
String.prototype.padStart() 方法是用于在字符串前面填充指定的字符。该方法接受两个参数：
- 第一个参数是填充后的字符串长度；
- 第二个参数是填充的字符串内容。
用法如下：
const str = "hello"; console.log(str.padStart(10, "a"));
这个例子中，首先给定一个长度为 10 的字符串，然后使用字符 "a" 来填充它。则输出的字符串是：
aaaaahello
如果我们不指定填充的字符串，则默认填充空格。
console.log(str.padStart(10));
这个例子中，由于我们没有指定填充字符串，所以输出的字符串是：
hello
- String.prototype.padEnd()
String.prototype.padEnd() 方法是用于在字符串后面填充指定的字符。该方法也接受两个参数：
- 第一个参数是填充后的字符串长度；
- 第二个参数是填充的字符串内容。
用法如下：
const str = "hello"; console.log(str.padEnd(10, "a"));
这个例子中，给定一个长度为 10 的字符串，然后使用字符 "a" 来填充它。则输出的字符串是：
helloaaaaa
同样地，如果我们不指定填充的字符串，则默认填充空格。
console.log(str.padEnd(10));
这个例子中，由于我们没有指定填充字符串，所以输出的字符串是：
hello
- 应用场景
那么什么时候需要使用 String.prototype.padStart() 和 String.prototype.padEnd() 呢？这里列出了一些使用场景：
- 对齐：表格中需要对内容进行对齐，使表格看起来更整洁；
- 格式化输出：在输出格式化内容时，需要进行填充；
- 计算处理：在计算字符串时，需要将字符串长度填充至指定长度。
- 总结
String.prototype.padStart() 和 String.prototype.padEnd() 的使用方法简单，但是它们在日常前端开发中非常实用。在字符串的处理中，不难发现它们的重要性。因此，在我们平时的 Web 开发中，我们应该多加了解和学习它们的用法，以提高开发效率。
示例代码：
const str = "hello"; console.log(str.padStart(10, "a")); // aaaaahello console.log(str.padStart(10)); // hello console.log(str.padEnd(10, "a")); // helloaaaaa console.log(str.padEnd(10)); // hello
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a2874548841e9894eef49a