ES7 中的 String.prototype.padStart() 和 String.prototype.padEnd() 方法详解
在 ES7 中引入了两个新的字符串方法：padStart() 和padEnd()。这两个方法可以让我们很方便地通过添加指定的字符将字符串填充到指定的长度。在本文中，我们将详细介绍这两个方法及其应用场景。
String.prototype.padStart()
String.prototype.padStart() 方法可以在当前字符串的开头添加指定的字符串，直到字符串达到指定的长度为止（如果需要的话），并返回一个新的字符串。
语法如下：
string.padStart(targetLength [, padString])
参数说明：
- targetLength：必需，表示需要填充后的整个字符串长度，如果当前字符串长度已经大于或等于此数值，则返回当前字符串。如果该值小于当前字符串长度，则返回原始的字符串。该参数可省略。
- padString：可选，表示要在当前字符串前添加的字符串，如果不提供该参数，则默认使用空格填充。
示例代码：
let str = 'hello';
console.log(str.padStart(10, 'a')); // aaahello console.log(str.padStart(2, 'a')); // hello console.log(str.padStart(10)); // hello
解释：
第一个例子中，字符串 str 本来只有 5 个字符，为了填充满 10 个字符的长度，我们添加了 5 个 "a"。通过运行结果可以看到，新字符串的长度确实是 10。
第二个例子中，由于目标长度小于原字符串的长度，因此不进行填充，返回原字符串。
第三个例子中，由于没有提供要填充的字符串，因此默认使用空格进行填充。
String.prototype.padEnd()
String.prototype.padEnd() 方法可以在当前字符串的结尾添加指定的字符串，直到字符串达到指定的长度为止（如果需要的话），并返回一个新的字符串。
语法如下：
string.padEnd(targetLength [, padString])
参数说明：
- targetLength：必需，表示需要填充后的整个字符串长度，如果当前字符串长度已经大于或等于此数值，则返回当前字符串。如果该值小于当前字符串长度，则返回原始的字符串。该参数可省略。
- padString：可选，表示要在当前字符串后添加的字符串，如果不提供该参数，则默认使用空格填充。
示例代码：
let str = 'hello';
console.log(str.padEnd(10, 'a')); // helloaaaaa console.log(str.padEnd(2, 'a')); // hello console.log(str.padEnd(10)); // hello
解释：
第一个例子中，字符串 str 本来只有 5 个字符，为了填充满 10 个字符的长度，我们添加了 5 个 "a"。通过运行结果可以看到，新字符串的长度确实是 10。
第二个例子中，由于目标长度小于原字符串的长度，因此不进行填充，返回原字符串。
第三个例子中，由于没有提供要填充的字符串，因此默认使用空格进行填充。
应用场景
String.prototype.padStart() 和String.prototype.padEnd() 方法可以用于多种应用场景，例如：
- 对齐输出：在控制台打印一些表格时，我们可能需要将列对齐，这时候就可以使用这两个方法进行填充。
- 编号长度统一：在某些场景下，可能需要对序号进行格式化输出，确保序号长度是一致的。
示例代码：
console.log('name'.padStart(10) + 'age'.padStart(10) + 'email'.padStart(20)); console.log('1'.padStart(4, '0') + '2'.padStart(4, '0') + '3'.padStart(4, '0'));
解释：
第一个例子中，我们输出一个表格，其中 "name" 列长为 10， "age" 列也长为 10， "email" 列长为 20。由于每列的字符串长度会不一致，因此我们使用 padStart() 方法对每列进行填充，确保总长度符合要求。
第二个例子中，我们将 1、2、3 进行依次输出，并且要求它们的宽度都为 4，即需要在单个数字前面添加 0 补齐到 4 位。
总结
String.prototype.padStart() 和String.prototype.padEnd() 方法可以让我们很方便地将字符串填充到指定的长度，应用非常广泛。它们的基本语法和参数意义也十分简单。
小提示：如果你在使用 ES6 及以上版本进行开发，推荐使用模板字符串来替代在字符串中使用加号 "+" 的方式拼接字符串。因为模板字符串更加直观、易读。例如，上面提到的输出表格代码可以改写为如下形式：
console.log(${'name'.padStart(10)}${'age'.padStart(10)}${'email'.padStart(20)});
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eed20af6b2d6eab38c4b7a