ES7 中新增字符串的 padStart 和 padEnd 方法

在前端开发中，经常会遇到需要对字符串进行填充的情况，比如将一个字符串填充到一定长度。在 ES7 中，新增了字符串的 padStart 和 padEnd 方法，可以帮助我们更方便地解决这个问题。

padStart 和 padEnd 方法的介绍

padStart 和 padEnd 方法都是字符串对象的方法，用于在字符串的开头或结尾填充指定的字符，以达到一定的长度。

padStart 方法

padStart 方法用于在字符串的开头填充指定的字符，以达到一定的长度。它接受两个参数：

• targetLength：要填充到的目标长度。
• padString：用于填充的字符串，默认为一个空格。

如果原字符串的长度已经大于等于目标长度，则不进行任何操作，直接返回原字符串。

padEnd 方法

padEnd 方法用于在字符串的结尾填充指定的字符，以达到一定的长度。它接受两个参数：

• targetLength：要填充到的目标长度。
• padString：用于填充的字符串，默认为一个空格。

如果原字符串的长度已经大于等于目标长度，则不进行任何操作，直接返回原字符串。

padStart 和 padEnd 方法的使用

下面是 padStart 和 padEnd 方法的使用示例：

// padStart 方法的使用示例
let str = 'hello';
let paddedStr = str.padStart(10, ' ');
console.log(paddedStr); // '     hello'

// padEnd 方法的使用示例
let str2 = 'world';
let paddedStr2 = str2.padEnd(10, '-');
console.log(paddedStr2); // 'world-----'

在这个示例中，我们使用 padStart 方法将字符串 'hello' 填充到了长度为 10 的字符串，用空格进行填充。最终得到的结果是 ' hello'。而在 padEnd 方法中，我们将字符串 'world' 填充到了长度为 10 的字符串，用 '-' 进行填充。最终得到的结果是 'world-----'。

padStart 和 padEnd 方法的学习意义

padStart 和 padEnd 方法的出现，使得我们在字符串填充方面，更加方便快捷。在以前，我们需要使用循环或者其他方法来实现字符串的填充，而现在只需要调用一个方法就可以完成。这不仅可以提高我们的开发效率，也可以减少我们的代码量。

此外，padStart 和 padEnd 方法还可以帮助我们更好地处理字符串长度不足的情况。在某些场景下，我们需要保证字符串的长度达到一定的要求，而 padStart 和 padEnd 方法可以帮助我们快速实现这一目标。

总结

ES7 中新增的 padStart 和 padEnd 方法，可以帮助我们更加方便快捷地处理字符串填充问题。在实际开发中，我们可以根据需要选择使用这两个方法，以提高我们的开发效率和代码质量。

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