什么是 ES8?
ES8是指ECMAScript 2017，是JavaScript语言的第八个版本，也是一项JavaScript语言的标准。ES8在2017年发布，带来了一些新增的特性和语法。其中之一就是我们今天要介绍的String.prototype.padStart()和String.prototype.padEnd()方法。
String.prototype.padStart()是什么?
String.prototype.padStart()是一个字符串方法，允许你向字符串开头添加指定长度的字符串。
这是一个基本的用法：
const str = 'foo'; console.log(str.padStart(10, '-')); // -------foo
在上面的代码中，str.padStart(10, '-')让foo字符串有了10个字符的长度，其他位置都填充了-字符。这样输出的就是-------foo。
需要注意的是，如果字符串本身的长度大于10，padStart不会对字符串本身进行操作。
const str2 = 'hello world'; console.log(str2.padStart(5, '-')); // hello world
在上面的代码中，hello world字符串的长度是11，大于了padStart指定的长度5。因此，输出的结果仍然是hello world。
String.prototype.padEnd()是什么?
String.prototype.padEnd()是和String.prototype.padStart()类似的方法，不同的是它是在字符串的末尾添加指定长度的字符串。
这是一个基本的用法：
const str = 'foo'; console.log(str.padEnd(10, '-')); // foo-------
在上面的代码中，str.padEnd(10, '-')让foo字符串有了10个字符的长度，其他位置都填充了-字符。这样输出的就是foo-------。
同样需要注意的是，如果字符串本身的长度大于10，padEnd不会对字符串本身进行操作。
const str2 = 'hello world'; console.log(str2.padEnd(5, '-')); // hello world
在上面的代码中，hello world字符串的长度是11，大于了padEnd指定的长度5。因此，输出的结果仍然是hello world。
如何使用 padStart 和 padEnd 方法？
一般情况下，我们会在字符串需要对齐的时候使用这两个方法。
比如，我们需要在输出的用户列表中，让所有的用户名称长度都是10个字符。如果名字长度不足10位，就在前面填充空格，如果名字长度大于10位，则按照原来的长度输出。
代码如下：
const userList = [
{ name: 'Jack', age: 28 },
{ name: 'Peter', age: 35 },
{ name: 'Tom', age: 21 },
{ name: 'Lisa', age: 26 },
];
userList.forEach((item) => {
console.log(
`${item.name.padEnd(10)} | ${item.age.toString().padStart(2, '0')}`
);
});在上面的代码中，我们使用了padEnd方法来填充名字字符串，并且使用了padStart方法来填充年龄字符串。在年龄填充的时候，如果个位数，我们需要在前面加0，才能保证输出的对齐。
输出的结果如下：
Jack | 28 Peter | 35 Tom | 21 Lisa | 26
实践的意义
在我们的实际开发中，经常需要对字符串的格式进行调整和对齐，这个时候就可以使用padStart和padEnd方法。这两个方法可以帮助我们非常方便的进行字符串的格式化，少写很多冗杂的代码。
总结
我们在本文中学习了ES8的String.prototype.padStart()和String.prototype.padEnd()方法，它们可以很方便地帮助我们对字符串进行格式化和对齐的操作。我们通过一个实际的例子来学习了如何在输出用户列表的时候使用这两个方法，让我们的数据更好看一些。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6596857aeb4cecbf2da55272