在 ES8/ES2017 中使用 padStart 和 padEnd 给字符串填充空格或字符

在 ES8/ES2017 中使用 padStart 和 padEnd 给字符串填充空格或字符

在日常的前端开发中，我们经常会遇到需要对字符串进行填充的情况，例如需要将一个字符串的长度扩充到指定的长度。在 ES8/ES2017 中，我们可以使用 padStart 和 padEnd 方法来进行字符串填充操作。

padStart 和 padEnd 方法的作用是在字符串的左侧或右侧填充指定的字符或空格，以达到指定长度的目的。这两个方法都接受两个参数：填充后的字符串长度和填充使用的字符或空格。

padStart 方法会在字符串的左侧填充字符或空格，直到字符串的长度达到指定长度。如果字符串本身的长度已经大于等于指定长度，则不进行任何操作。

padEnd 方法会在字符串的右侧填充字符或空格，直到字符串的长度达到指定长度。如果字符串本身的长度已经大于等于指定长度，则不进行任何操作。

下面是使用 padStart 和 padEnd 方法进行字符串填充的示例代码：

// javascriptcn.com 代码示例
// 使用 padStart 方法填充字符串
const str1 = 'hello';
const paddedStr1 = str1.padStart(10, '-');
console.log(paddedStr1); // '-----hello'

// 使用 padEnd 方法填充字符串
const str2 = 'world';
const paddedStr2 = str2.padEnd(10, '-');
console.log(paddedStr2); // 'world-----'

在上面的示例代码中，我们分别使用 padStart 和 padEnd 方法对字符串进行了填充操作。在填充的过程中，我们使用了 '-' 字符作为填充字符。

除了使用字符作为填充内容外，我们还可以使用空格进行填充。在 padStart 和 padEnd 方法中，如果不传入第二个参数，则默认使用空格进行填充。例如：

// javascriptcn.com 代码示例
// 使用空格进行填充
const str3 = 'hello';
const paddedStr3 = str3.padStart(10);
console.log(paddedStr3); // '     hello'

// 使用空格进行填充
const str4 = 'world';
const paddedStr4 = str4.padEnd(10);
console.log(paddedStr4); // 'world     '

在上面的示例代码中，我们使用空格进行了字符串的填充操作。可以看到，如果不传入第二个参数，padStart 和 padEnd 方法会默认使用空格进行填充。

总结

在 ES8/ES2017 中，我们可以使用 padStart 和 padEnd 方法对字符串进行填充操作。这两个方法可以帮助我们快速地将字符串的长度扩展到指定的长度，并且可以使用不同的字符或空格进行填充。在使用这两个方法时，我们需要注意传入的参数，以确保填充后的字符串符合我们的预期。

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