使用 ECMAScript 2017 (ES8) 中的 padStart() 和 padEnd() 方法来填充字符串

在前端开发中，字符串处理是一个必不可少的环节。ECMAScript 2017 (ES8) 中新增了 padStart() 和 padEnd() 方法，它们主要用于填充字符串。

padStart() 方法

padStart() 方法可以在字符串的左侧填充指定的字符，直到字符串达到指定的长度。其语法如下：

"str".padStart(targetLength [, padString])

其中，targetLength 是填充后的字符串长度，padString 是用来填充的字符。

示例代码：

const str = "hello";
console.log(str.padStart(10, "x")); // xxxxxhello
console.log(str.padStart(4, "x")); // hello

在第一个例子中，字符串长度不足 10，因此使用 "x" 在左侧填充，直到长度为 10。

在第二个例子中，字符串长度为 5，已经满足长度为 4 的条件，因此不需要填充。

padEnd() 方法

padEnd() 方法则是在字符串的右侧填充指定的字符，直到字符串达到指定的长度。其语法如下：

"str".padEnd(targetLength [, padString])

示例代码：

const str = "hello";
console.log(str.padEnd(10, "x")); // helloxxxxx
console.log(str.padEnd(4, "x")); // hello

与 padStart() 方法类似，我们可以使用 padEnd() 方法在字符串的右侧填充指定数量的字符。

使用场景

padStart() 和 padEnd() 方法主要用于在字符串的两端填充指定的字符，让字符串达到特定的长度。这在某些场景下非常有用，例如固定长度的输出。

示例代码：

const num = 123;
console.log(num.toString().padStart(5, "0")); // 00123

在这个例子中，我们需要将数字转换为字符串，并将字符串的长度固定为 5，如果字符串长度不足 5，我们需要在左侧补零，以达到固定长度的标准输出。

总结

padStart() 和 padEnd() 方法是 ECMAScript 2017 (ES8) 中非常实用的字符串处理方法。它们可以快速地将字符串填充到指定的长度，并且可以使用其它字符进行填充，避免了冗余的代码。在字符串处理中，我们经常需要对字符串进行格式化，这些新的字符串填充方法提供了更加简单和便捷的方式。

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