在 ES8 中，JavaScript 新增了两个字符串方法：padStart() 和 padEnd()。这两个方法可以让我们更方便地对字符串进行填充操作。本文将详细介绍这两个方法的用法和示例代码，并探讨其学习和指导意义。
padStart()
padStart() 方法可以在字符串的前面添加一定数量的字符，直到字符串达到指定的长度。其语法如下：
string.padStart(targetLength[, padString])
其中，targetLength 表示字符串最终的长度，如果当前字符串长度小于 targetLength，则会在字符串前面添加一定数量的字符，使其达到指定长度。而 padString 则为可选参数，表示要添加的字符，默认为 " "（空格）。
下面是一个示例代码：
const str = "hello"; console.log(str.padStart(10)); // " hello" console.log(str.padStart(10, "x")); // "xxxxxhello" console.log(str.padStart(3)); // "hello"
在上面的代码中，我们分别对字符串 "hello" 进行了三次填充操作。第一次，我们使用了默认的 " "（空格）作为填充字符，将字符串填充到了长度为 10。第二次，我们使用了 "x" 作为填充字符，将字符串填充到了长度为 10。第三次，由于字符串本身已经超过了指定长度 3，因此不需要进行填充。
padEnd()
padEnd() 方法与 padStart() 方法类似，只不过它是在字符串的后面添加一定数量的字符，直到字符串达到指定的长度。其语法如下：
string.padEnd(targetLength[, padString])
与 padStart() 方法一样，targetLength 表示字符串最终的长度，如果当前字符串长度小于 targetLength，则会在字符串后面添加一定数量的字符，使其达到指定长度。而 padString 则为可选参数，表示要添加的字符，默认为 " "（空格）。
下面是一个示例代码：
const str = "hello"; console.log(str.padEnd(10)); // "hello " console.log(str.padEnd(10, "x")); // "helloxxxxx" console.log(str.padEnd(3)); // "hello"
在上面的代码中，我们同样对字符串 "hello" 进行了三次填充操作。第一次，我们使用了默认的 " "（空格）作为填充字符，将字符串填充到了长度为 10。第二次，我们使用了 "x" 作为填充字符，将字符串填充到了长度为 10。第三次，由于字符串本身已经超过了指定长度 3，因此不需要进行填充。
学习和指导意义
padStart() 和 padEnd() 方法的出现，使得字符串的填充操作变得更加方便和简单。在实际开发中，我们经常需要对字符串进行填充操作，比如在输出表格、对齐文本等场景中。使用这两个方法，可以大大减少代码量，提高开发效率。
在使用这两个方法时，需要注意一些细节。比如，如果填充字符的长度超过了目标长度，那么会自动截取填充字符，而不是直接抛出错误。因此，我们需要根据具体的场景，选择合适的填充字符和目标长度，以避免出现意外的结果。
总结
本文介绍了 ES8 中新增的字符串方法 padStart() 和 padEnd()，并通过示例代码详细讲解了它们的用法和注意事项。这两个方法可以方便地对字符串进行填充操作，提高开发效率。同时，我们也需要注意一些细节，以避免出现意外的结果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65825791d2f5e1655dd787df