ES7 新特性：String.prototype.padStart/String.prototype.padEnd 方法-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 7（简称 ES7）中，JavaScript 提供了两个新的字符串方法 String.prototype.padStart 和 String.protoype.padEnd，它们可以方便地填充字符串，特别适用于一些格式化输出的场景。下面我们就来详细了解一下这两个新特性。

String.prototype.padStart

String.prototype.padStart 方法用于在字符串开始的位置插入字符，确保字符串达到特定的长度。这个方法接受两个参数：要插入的字符，和目标长度。如果当前字符串的长度小于目标长度，将在字符串开始的位置插入足够数量的字符，使得字符串长度达到目标长度。

示例代码：

const str = 'hello';
console.log(str.padStart(10, '-')); // -----hello

在上面的示例中，我们调用了字符串对象 str 的 padStart 方法，并且将要插入的字符设置为 '-'，目标长度设置为 10。由于当前字符串的长度为 5，因此 padStart 方法在字符串开始的位置补齐了 5 个 '-'，最终输出的结果为 -----hello。

另外，如果要插入的字符的长度超过了目标长度和当前字符串的长度之和，那么 padStart 方法会直接使用需要插入的字符。

示例代码：

const str = 'hello';
console.log(str.padStart(2, '-')); // hello
console.log(str.padStart(3, 'abc')); // abhello

在上面的示例中，我们分别将目标长度设置为 2 和 3，并且将要插入的字符设置为 '-' 和 'abc'。由于目标长度更短，所以无论如何都不能插入足够数量的字符，因此直接输出原字符串 hello。

String.protoype.padEnd

String.protoype.padEnd 方法与 String.prototype.padStart 类似，也用于在字符串末尾插入字符，确保字符串达到特定的长度。这个方法同样接受两个参数：要插入的字符，和目标长度。如果当前字符串的长度小于目标长度，将在字符串末尾插入足够数量的字符，使得字符串长度达到目标长度。

示例代码：

const str = 'hello';
console.log(str.padEnd(10, '-')); // hello-----

在上面的示例中，我们调用了字符串对象 str 的 padEnd 方法，并且将要插入的字符设置为 '-'，目标长度设置为 10。由于当前字符串的长度为 5，因此 padEnd 方法在字符串末尾补齐了 5 个 '-'，最终输出的结果为 hello-----。

另外，如果要插入的字符的长度超过了目标长度和当前字符串的长度之和，那么 padEnd 方法会直接使用需要插入的字符。

示例代码：

const str = 'hello';
console.log(str.padEnd(2, '-')); // hello
console.log(str.padEnd(3, 'abc')); // helloa

总结

String.prototype.padStart 和 String.protoype.padEnd 方法给我们提供了一种方便的字符串填充方式，可以应用在一些需要格式化输出的场景中。需要注意的是，要插入的字符不能是空字符串，否则会被忽略。同时，这两个方法会返回一个新的字符串，不会修改原来的字符串对象。

以上就是关于 ES7 新特性 String.prototype.padStart 和 String.protoype.padEnd 方法的详细介绍。每个前端工程师都应该了解这些新特性，并且在实际开发中善加应用。

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