在 ES9（ECMAScript 2018）中，新增了 String.prototype.padStart() 和 String.prototype.padEnd() 两个方法。这两个方法主要是用来填充字符串的，可以让字符串达到指定的长度。本文将详细介绍这两个方法的使用方法以及示例代码。
String.prototype.padStart()
String.prototype.padStart() 方法用于在字符串的开头添加指定字符，以使字符串达到指定长度。具体的语法如下：
str.padStart(targetLength [, padString]);
其中，targetLength 是要达到的字符串长度，而 padString 是用来填充的字符串。如果不传入 padString，则默认用空格填充。
下面是一个示例代码：
const str = 'hello'; console.log(str.padStart(10)); // " hello" console.log(str.padStart(10, '.')); // ".....hello" console.log(str.padStart(2)); // "hello"
在第一个示例中，str 的长度为 5，传入 10 后，就在字符串开头填充了 5 个空格，使其达到了 10 的长度。在第二个示例中，传入了 .，所以在字符串开头填充了 5 个 .。在第三个示例中，要达到的长度只有 2，但是 str 的长度已经大于 2 了，因此不进行填充。
需要注意的是，如果指定填充字符串的长度大于要达到的长度，那么会舍去超出要达到长度的部分。比如：
console.log(str.padStart(4, 'abc')); // "hello"
在这个示例中，虽然传入了 3 个字符用来填充，但只有一个字符生效了，因为字符串已经达到了 4 的长度。
String.prototype.padEnd()
String.prototype.padEnd() 方法与 String.prototype.padStart() 相似，不同的是这个方法是用来在字符串的结尾添加指定字符。具体的语法如下：
str.padEnd(targetLength [, padString]);
其中，targetLength 和 padString 的含义与 String.prototype.padStart() 相同。下面是一个示例代码：
const str = 'hello'; console.log(str.padEnd(10)); // "hello " console.log(str.padEnd(10, '.')); // "hello....." console.log(str.padEnd(2)); // "hello"
这个示例和之前的示例类似，不再赘述。
应用场景
那么，这两个方法有什么实际的应用场景呢？主要有以下几种情况：
字符串对齐
如果我们需要把字符串对齐，可以使用 String.prototype.padStart() 和 String.prototype.padEnd() 方法。比如，我们要把以下字符串对齐：
Name: John Age: 18 Address: New York
可以这样做：
const name = 'John';
const age = '18';
const address = 'New York';
console.log(`Name: ${name.padEnd(10)}\nAge: ${age.padEnd(10)}\nAddress: ${address.padEnd(10)}`);输出结果如下：
Name: John // 长度为 10 Age: 18 // 长度为 10 Address: New York // 长度为 10
数字补位
在开发中，经常会遇到需要在数字前面补零的情况，比如时间格式化。可以使用 String.prototype.padStart() 方法来实现。比如，我们要把数字 5 转化成 005，可以这样做：
console.log('5'.padStart(3, '0')); // "005"实际开发中，我们还要根据要补的位数来进行补位。比如，如果要补成 4 位数，可以这样实现：
function pad(num, n = 4) {
return String(num).padStart(n, '0');
}
console.log(pad(5)); // "0005"
console.log(pad(42)); // "0042"
console.log(pad(888)); // "0888"这个函数可以让我们快速实现数字的补位操作。
生成 UUID
UUID (Universally Unique Identifier) 是一种唯一标识符，是在一定的时间和空间范围内，由一台计算机生成的数字。我们可以使用 String.prototype.padStart() 方法来生成 UUID。代码示例如下：
function generateUUID() {
const s4 = () => Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
return `${s4()}${s4()}-${s4()}-4${s4().substring(1)}-${s4()}-${s4()}${s4()}${s4()}`.toLowerCase();
}
console.log(generateUUID());生成的 UUID 会如下所示：
"6181ce7e-f436-47be-a681-2fd445d13d94"
总结
String.prototype.padStart() 和 String.prototype.padEnd() 两个方法可以让我们快速实现字符串的填充操作，应用场景广泛。在实际开发中，我们还可以使用它们来实现字符串对齐、数字补位和生成 UUID 等功能。因此，掌握这两个方法对于前端开发工程师来说是非常必要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482ccd848841e9894228699