在 ES2017 中使用字符串填充函数填充不同长度的字符串

在 ES2017 中使用字符串填充函数填充不同长度的字符串

在前端开发中，我们经常会遇到需要对字符串进行填充的情况。比如，我们需要把一个字符串填充为一定长度，或者我们需要在字符串的前面或后面填充一些特定的字符。在 ES2017 中，我们可以使用字符串填充函数来实现这些操作。

字符串填充函数的语法是：

str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])

其中，str 表示要填充的字符串，targetLength 表示填充后的总长度，padString 表示要填充的字符。如果不指定 padString，默认使用空格填充。

下面我们来看一些示例代码：

示例一：将字符串填充为一定长度

const str = 'hello';
console.log(str.padStart(10, '0')); // 输出：00000hello
console.log(str.padEnd(10, '0')); // 输出：hello00000

在上面的代码中，我们将字符串 str 填充为长度为 10 的字符串。在 padStart 函数中，我们使用 0 字符进行填充，在 padEnd 函数中，我们同样使用 0 字符进行填充。需要注意的是，如果原字符串的长度已经等于或大于目标长度，则不进行填充。

示例二：在字符串的前面或后面填充特定字符

const str = 'hello';
console.log(str.padStart(10, '0')); // 输出：00000hello
console.log(str.padStart(10, '123')); // 输出：123123hello
console.log(str.padEnd(10, '0')); // 输出：hello00000
console.log(str.padEnd(10, '123')); // 输出：hello123123

在上面的代码中，我们除了使用空格进行填充外，还可以使用其他字符进行填充。比如，在 padStart 函数中，我们使用了 123 字符进行填充，在 padEnd 函数中，我们同样使用了 123 字符进行填充。需要注意的是，如果要填充的字符长度大于目标长度，会被截断到目标长度。

示例三：使用默认参数

const str = 'hello';
console.log(str.padStart(10)); // 输出：     hello
console.log(str.padEnd(10)); // 输出：hello     

在上面的代码中，我们没有传入 padString 参数，这时会默认使用空格进行填充。

总结

字符串填充函数是 ES2017 中新增的字符串处理函数，可以方便地对字符串进行填充操作。在实际开发中，我们可以根据需要选择不同的填充字符，从而实现更加灵活的字符串处理。

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