ES10 中新增的 String.prototype.padStart() 和 String.prototype.padEnd() 方法详解-JavaScript中文网-JavaScript教程资源分享门户

在 ES10 中，JavaScript 新增了两个字符串函数：String.prototype.padStart() 和 String.prototype.padEnd()。这两个函数可以让我们更方便地对字符串进行填充，使其达到指定的长度。本文将详细介绍这两个函数的用法、特点以及示例代码。

String.prototype.padStart()

String.prototype.padStart() 函数可以在字符串的开头填充指定的字符，直到字符串达到指定的长度。其语法如下：

str.padStart(targetLength [, padString])

其中，targetLength 是填充后字符串的长度，padString 是填充的字符。如果不指定 padString，默认使用空格填充。

下面是一个示例代码，演示了如何使用 padStart() 函数将数字补全到指定的位数：

const num = '1';
const paddedNum = num.padStart(3, '0');
console.log(paddedNum); // 输出 "001"

在上面的代码中，我们将数字 1 补全到 3 位，使用的填充字符是 0。因此，最终输出的结果是 001。

需要注意的是，如果指定的 targetLength 小于或等于原始字符串的长度，padStart() 函数将不会对字符串进行任何操作，直接返回原始字符串。例如：

const str = 'hello';
const paddedStr = str.padStart(3, '0');
console.log(paddedStr); // 输出 "hello"

在上面的代码中，我们将字符串 hello 补全到 3 位，但是由于原始字符串的长度已经超过了 3，因此 padStart() 函数直接返回原始字符串。

String.prototype.padEnd() 函数与 String.prototype.padStart() 函数类似，不同之处在于它是在字符串的结尾填充指定的字符，直到字符串达到指定的长度。其语法如下：

str.padEnd(targetLength [, padString])

其中，targetLength 是填充后字符串的长度，padString 是填充的字符。如果不指定 padString，默认使用空格填充。

下面是一个示例代码，演示了如何使用 padEnd() 函数将字符串补全到指定的长度：

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

在上面的代码中，我们将字符串 hello 补全到 10 位，使用的填充字符是 -。因此，最终输出的结果是 hello-----。

同样地，如果指定的 targetLength 小于或等于原始字符串的长度，padEnd() 函数将不会对字符串进行任何操作，直接返回原始字符串。

String.prototype.padStart() 和 String.prototype.padEnd() 函数可以让我们更方便地对字符串进行填充，使其达到指定的长度。这两个函数的特点如下：

这两个函数的使用场景非常广泛，例如在生成固定长度的字符串时，或者在对齐文本时。希望本文对你有所帮助，让你更好地理解和使用这两个函数。

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