在前端开发中，字符串操作是非常常见的操作之一。我们经常需要对字符串进行扩展、补全、填充等操作。在 ES10 中，引入了新的 String padding 函数，可以更方便地对字符串进行填充操作。
String padding
String padding 函数包括 padStart 和 padEnd 两种函数，分别用于在字符串开始或结尾处填充指定的字符串。
padStart
padStart 函数用于在字符串开始处填充指定长度的字符串。其语法如下：
--------------------------- -----------
其中，targetLength 表示要填充到的总长度，padString 表示用于填充的字符串（默认为空格）。
例如，我们可以使用下面的代码将一个字符串填充到指定的长度：
----- --- - -------- ----- ------ - ---------------- ----- -------------------- -- ----------
这里使用 padStart 函数将字符串填充到了长度为 10，使用字符串 'x' 进行填充。
padEnd
padEnd 函数用于在字符串结尾处填充指定长度的字符串。其语法如下：
------------------------- -----------
与 padStart 函数类似，其中 targetLength 表示要填充到的总长度，padString 表示用于填充的字符串（默认为空格）。
例如，我们可以使用下面的代码将一个字符串填充到指定的长度：
----- --- - -------- ----- ------ - -------------- ----- -------------------- -- ----------
这里使用 padEnd 函数将字符串填充到了长度为 10，使用字符串 'x' 进行填充。
应用场景
使用 padStart 和 padEnd 函数可以方便我们进行字符串的格式化和对齐。例如，我们可以使用 padStart 函数将数字输出为固定长度的字符串：
----- --- - ---- ----- --- - -------------------------- ----- ----------------- -- -----
这里使用 padStart 函数将数字填充到了长度为 5，使用字符串 '0' 进行填充。
注意事项
在使用 padStart 和 padEnd 函数时，需要注意以下几点：
如果目标长度小于或等于原始字符串长度，则不会进行填充操作。
如果未指定用于填充的字符串，默认使用空格进行填充。
如果指定的填充字符串长度超过了目标长度，会进行截断操作。
总结
使用 ES10 的 String padding 函数可以方便地进行字符串填充操作，提高开发效率和代码可读性。在实际开发中，我们可以根据需要灵活地应用这些函数，达到预期的效果。
注：需要注意的是，由于 ES10 是比较新的标准，一些旧版浏览器可能不支持该特性。在使用时需要根据实际情况判断是否需要进行兼容处理。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65421c487d4982a6ebbc2be2