ES2017 中新增的字符串方法 String.padStart() 和 String.padEnd() 教程-JavaScript中文网-JavaScript教程资源分享门户

在 ES2017 中，新增了两个字符串方法：String.padStart() 和 String.padEnd()。这两个方法可以帮助我们很方便地对字符串进行填充操作。本文将详细介绍这两个方法的用法和示例，并指导你如何更好地使用它们。

String.padStart()

String.padStart() 方法可以在字符串的开头填充指定的字符，使字符串达到指定的长度。该方法接受两个参数：第一个参数是填充后字符串的总长度，第二个参数是用于填充的字符。

下面是一个使用 String.padStart() 方法的示例：

const str = 'hello';
const paddedStr = str.padStart(10, '0');
console.log(paddedStr); // '00000hello'

在上面的示例中，'hello' 这个字符串在前面填充了 5 个 '0'，使其总长度达到了 10。

如果被填充的字符不足以使字符串达到指定的长度，那么 String.padStart() 方法会将填充字符重复使用直到达到指定的长度。下面是一个示例：

const str = 'hello';
const paddedStr = str.padStart(10, 'abc');
console.log(paddedStr); // 'abcahellobc'

在上面的示例中，'hello' 这个字符串在前面使用 'abc' 填充，但是 'abc' 只能使用一次，所以在填充到 10 个字符时，'abc' 只填充了一部分。

String.padEnd() 方法与 String.padStart() 方法类似，不同之处在于它在字符串的结尾填充指定的字符。该方法也接受两个参数：第一个参数是填充后字符串的总长度，第二个参数是用于填充的字符。

下面是一个使用 String.padEnd() 方法的示例：

const str = 'hello';
const paddedStr = str.padEnd(10, '0');
console.log(paddedStr); // 'hello00000'

在上面的示例中，'hello' 这个字符串在后面填充了 5 个 '0'，使其总长度达到了 10。

与 String.padStart() 方法类似，如果被填充的字符不足以使字符串达到指定的长度，那么 String.padEnd() 方法会将填充字符重复使用直到达到指定的长度。

String.padStart() 和 String.padEnd() 方法是很实用的字符串方法，它们可以帮助我们在字符串前面或后面填充指定的字符，使字符串达到指定的长度。在实际开发中，我们可以使用这两个方法来规范化字符串的长度，使其更易于处理。

需要注意的是，String.padStart() 和 String.padEnd() 方法都是 ES2017 中新增的方法，如果你的项目需要支持旧的浏览器，那么需要使用 polyfill 或者其他的兼容方案。

以上就是 String.padStart() 和 String.padEnd() 方法的详细介绍和示例，希望能帮助你更好地了解和使用它们。

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