使用技巧：String.prototype.padStart 和 String.prototype.padEnd-JavaScript中文网-JavaScript教程资源分享门户

在 ES7 中，新增了两个字符串方法 padStart 和 padEnd，它们可以用来填充字符串以达到指定长度。这两个新的方法较之于传统的 String.prototype.repeat() 方法更为便捷易用，因此受到了前端程序员的广泛关注。让我们详细探讨一下如何使用这两个新方法。

1. String.prototype.padStart

padStart 方法可用于将指定字符串（padding）附加到目标字符串的开头，以向目标字符串添加空格或其他字符。方法有两个参数：the total string length to pad to and the padding character.

语法：

string.padStart(targetLength [, padding])

示例代码：

const str = 'Hello';
console.log(str.padStart(10, '-')); // '-----Hello'
console.log(str.padStart(3, '*')); // 'Hello'

在上面的例子中，我们为 str 字符串创建了一个新的填充字符串，并将其置于其开始位置。

2. String.prototype.padEnd

另一个类似的新方法是 padEnd。与 padStart 方法相同，该函数也会对目标字符串进行填充以使其达到指定的长度并且填充到目标字符串的末尾。该方法也具有两个参数：the total string length to pad to and the padding character.

语法：

string.padEnd(targetLength [, padding])

示例代码：

const str = 'Hello';
console.log(str.padEnd(10, '-')); // 'Hello-----'
console.log(str.padEnd(3, '*')); // 'Hello'

在这个示例中，我们将在 str 字符串的尾部添加一个新的填充字符串。

3. 深入使用

除了简单的字符填充之外，这两种方法还可以与其他 JavaScript 方法和语言结构一起使用。例如，您可以在字符串内联参数中使用它们，以编写可读性更强的模板字面量。也可以动态计算填充字符串。

示例代码：

-- -------------------- ---- -------
----- - - ------
----- - - ------
----- - - ------

----- ------ - -
    -------------- -----
    -------------- -----
    -------------- -----
--

--------------------

该示例使用了 ES6 的模板字符串特性，并使用 padEnd 填充字符串，根据需要对每个值进行相应的格式化。

4. 结论

使用 String.prototype.padStart 和 String.prototype.padEnd 可以使前端开发变得更加高效、优雅。而且这两个函数优雅地处理了边缘情况，如当目标长度小于或等于字符串本身的长度时不会填充任何字符。这些方法还可以与其他 JavaScript 特性和语言结构结合使用，进一步增强其功能。

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