ECMAScript 2017 新特性 —— 字符串填充

ECMAScript 2017 新特性 —— 字符串填充

在 ECMAScript 2017 中，新增了一个非常实用的字符串方法：字符串填充（String padding）。在一些字符串操作场景中，我们希望将一个字符串填充到一定长度，这时就可以使用字符串填充方法来方便地实现。

字符串填充方法有两个：padStart 和 padEnd，它们分别在目标字符串的起始处和结尾处插入一些字符，使目标字符串长度达到所需的长度。

padStart 能够在字符串前面添加一些字符，以实现字符串长度达标的目的；padEnd 能够在字符串后面添加一些字符，以达到相同的效果。这两个方法可以传入两个参数：第一个参数指定填充后的长度，第二个参数（可选）指定在字符串前面/后面填充的字符，默认为空格。

下面是两个方法的示例代码：

let str1 = 'hello';
let str2 = 'world';

console.log(str1.padStart(8, 'hi ')); // 输出 'hi hello'
console.log(str1.padEnd(9, '-')); // 输出 'hello----'
console.log(str2.padStart(10, 'wow ')); // 输出 'wow world'
console.log(str2.padEnd(9, '+')); // 输出 'world++++'

在这个示例中，我们定义了两个字符串 str1 和 str2，并且演示了如何使用 padStart 和 padEnd 对这些字符串进行填充。我们可以看到：

• 如果目标字符串的长度小于参数中指定的长度，那么填充字符会被添加到目标字符串的开头或结尾。可以看到，我们的例子中，str1.padStart(8, 'hi ') 实际上将 'hello' 填充到了长度为 8，结果为 'hi hello'。
• 如果目标字符串的长度已经大于或等于指定长度，那么填充字符将不会添加，而是返回原始字符串。例如，str1.padEnd(5, '+') 实际上不会添加任何字符，因为 'hello' 已经大于等于目标长度 5。

需要注意的是，当填充字符的长度大于目标字符串还多时，填充字符会被截断以适应目标字符串的长度，例如：

let str3 = 'hello';

console.log(str3.padStart(8, 'hi there ')); // 输出 'hello'

在上面的例子中，padStart 并没有将 'hi there ' 的长度（9）全部添加到目标字符串 'hello' 中，而是将其截断为 'hi there'，这个字符串长度就是 8，与参数中指定的目标长度 8 相等。

字符串填充方法的出现，使得处理字符串长度的操作不再是一个棘手的问题。例如，在实现表格等对齐操作时，通过字符串填充方法便能够轻松处理字符串长度一致的问题，是一种非常实用的字符串操作技巧。

总结

在 ECMAScript 2017 中，引入了两个字符串填充方法：padStart 和 padEnd，它们分别能够在目标字符串的起始和结尾处添加一些字符，以实现字符串长度达到所需长度的目的。字符串填充方法非常实用，常常用于处理字符串对齐等场景，是前端开发者需要掌握的重要技巧之一。

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