在 ES7 中，新增了一个字符串原型方法 padEnd()，它可以很方便地对字符串补齐指定长度。
语法
padEnd() 方法的语法如下：
str.padEnd(targetLength [, padString])
其中，targetLength 表示目标长度，即字符串需要达到的长度；padString 表示用于补齐字符串的字符。
如果不指定 padString，则会默认用空格进行补齐，如果 targetLength 小于等于原字符串的长度，则返回原字符串。
示例
下面是一些使用 padEnd() 方法的示例：
// 使用空格进行补齐
console.log('hello'.padEnd(10)); // 'hello '
console.log('world'.padEnd(6)); // 'world '
console.log('hello'.padEnd(3)); // 'hello'
// 使用指定字符进行补齐
console.log('hello'.padEnd(10, '*')); // 'hello*****'
console.log('world'.padEnd(8, '_')); // 'world___'用途
padEnd() 方法常见的用途是对齐字符串。例如，我们可以使用它来对齐表格：
// javascriptcn.com 代码示例
const data = [
{ name: 'Alice', age: 18, score: 90 },
{ name: 'Bob', age: 20, score: 80 },
{ name: 'Charlie', age: 22, score: 70 }
];
// 计算每列最长的字符串长度
const lengthName = Math.max(...data.map(item => item.name.length));
const lengthAge = Math.max(...data.map(item => item.age.toString().length));
const lengthScore = Math.max(...data.map(item => item.score.toString().length));
// 输出表头
console.log(`Name${' '.padEnd(lengthName - 4)}Age${' '.padEnd(lengthAge - 2)}Score`);
// 输出表格
data.forEach(item => {
console.log(`${item.name}${' '.padEnd(lengthName - item.name.length)}${item.age}${' '.padEnd(lengthAge - item.age.toString().length)}${item.score}${' '.padEnd(lengthScore - item.score.toString().length)}`);
});上述代码输出的结果如下：
Name Age Score Alice 18 90 Bob 20 80 Charlie 22 70
注意事项
需要注意的是，padEnd() 方法是 ES7 新增的方法，不是所有浏览器都支持。在使用时，可以使用 babel 等工具进行转换。
另外，如果需要在 React 或 Vue 中使用 padEnd() 方法，可以使用模板字符串的方式进行字符串拼接，例如：
// javascriptcn.com 代码示例
// 在 React 中使用 padEnd() 方法
const str = 'hello';
const targetLength = 8;
const padString = ' ';
return <div>{`${str}${padString.repeat(targetLength - str.length)}`}</div>;
// 在 Vue 中使用 padEnd() 方法
const str = 'hello';
const targetLength = 8;
const padString = ' ';
return `<div>${str}${padString.repeat(targetLength - str.length)}</div>`;可以看出，即使不能直接使用 padEnd() 方法，我们也可以通过其它方式进行对齐。
总结
padEnd() 方法是 ES7 新增的字符串原型方法，可以方便地对字符串进行补齐。在实际开发中，我们可以使用这个方法来对齐字符串，尤其是在处理表格等场景中，更能显示出它的优越性。虽然不是所有浏览器都支持这个方法，但我们可以使用 babel 等工具进行转换，在 React 或 Vue 中也可以通过模板字符串的方式进行字符串拼接。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65485d897d4982a6eb2a38e6