使用 ES10 的 String padding 新函数填充字符串

在前端开发中，字符串操作是非常常见的操作之一。我们经常需要对字符串进行扩展、补全、填充等操作。在 ES10 中，引入了新的 String padding 函数，可以更方便地对字符串进行填充操作。

String padding

String padding 函数包括 padStart 和 padEnd 两种函数，分别用于在字符串开始或结尾处填充指定的字符串。

padStart

padStart 函数用于在字符串开始处填充指定长度的字符串。其语法如下：

str.padStart(targetLength[, padString])

其中，targetLength 表示要填充到的总长度，padString 表示用于填充的字符串（默认为空格）。

例如，我们可以使用下面的代码将一个字符串填充到指定的长度：

const str = 'hello';
const newStr = str.padStart(10, 'x');
console.log(newStr); // xxxxxhello

这里使用 padStart 函数将字符串填充到了长度为 10，使用字符串 'x' 进行填充。

padEnd

padEnd 函数用于在字符串结尾处填充指定长度的字符串。其语法如下：

str.padEnd(targetLength[, padString])

与 padStart 函数类似，其中 targetLength 表示要填充到的总长度，padString 表示用于填充的字符串（默认为空格）。

例如，我们可以使用下面的代码将一个字符串填充到指定的长度：

const str = 'hello';
const newStr = str.padEnd(10, 'x');
console.log(newStr); // helloxxxxx

这里使用 padEnd 函数将字符串填充到了长度为 10，使用字符串 'x' 进行填充。

应用场景

使用 padStart 和 padEnd 函数可以方便我们进行字符串的格式化和对齐。例如，我们可以使用 padStart 函数将数字输出为固定长度的字符串：

const num = 123;
const str = num.toString().padStart(5, '0');
console.log(str); // 00123

这里使用 padStart 函数将数字填充到了长度为 5，使用字符串 '0' 进行填充。

注意事项

在使用 padStart 和 padEnd 函数时，需要注意以下几点：

1. 如果目标长度小于或等于原始字符串长度，则不会进行填充操作。

2. 如果未指定用于填充的字符串，默认使用空格进行填充。

3. 如果指定的填充字符串长度超过了目标长度，会进行截断操作。

总结

使用 ES10 的 String padding 函数可以方便地进行字符串填充操作，提高开发效率和代码可读性。在实际开发中，我们可以根据需要灵活地应用这些函数，达到预期的效果。

注：需要注意的是，由于 ES10 是比较新的标准，一些旧版浏览器可能不支持该特性。在使用时需要根据实际情况判断是否需要进行兼容处理。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65421c487d4982a6ebbc2be2