在 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() 方法常见的用途是对齐字符串。例如，我们可以使用它来对齐表格：
-- -------------------- ---- ------- ----- ---- - - - ----- -------- ---- --- ------ -- -- - ----- ------ ---- --- ------ -- -- - ----- ---------- ---- --- ------ -- - -- -- ------------ ----- ---------- - ------------------------- -- ------------------- ----- --------- - ------------------------- -- ----------------------------- ----- ----------- - ------------------------- -- ------------------------------- -- ---- -------------------- ------------------- - --------- ------------------ - ----------- -- ---- ----------------- -- - ---------------------------- ------------------- - -------------------------------- ------------------ - -------------------------------------------- -------------------- - --------------------------------- ---
上述代码输出的结果如下：
Name Age Score Alice 18 90 Bob 20 80 Charlie 22 70
注意事项
需要注意的是，padEnd() 方法是 ES7 新增的方法，不是所有浏览器都支持。在使用时，可以使用 babel 等工具进行转换。
另外，如果需要在 React 或 Vue 中使用 padEnd() 方法，可以使用模板字符串的方式进行字符串拼接，例如：
-- -------------------- ---- ------- -- - ----- --- -------- -- ----- --- - -------- ----- ------------ - -- ----- --------- - - -- ------ -------------------------------------------- - --------------------- -- - --- --- -------- -- ----- --- - -------- ----- ------------ - -- ----- --------- - - -- ------ ------------------------------------------- - --------------------
可以看出，即使不能直接使用 padEnd() 方法，我们也可以通过其它方式进行对齐。
总结
padEnd() 方法是 ES7 新增的字符串原型方法，可以方便地对字符串进行补齐。在实际开发中，我们可以使用这个方法来对齐字符串，尤其是在处理表格等场景中，更能显示出它的优越性。虽然不是所有浏览器都支持这个方法，但我们可以使用 babel 等工具进行转换，在 React 或 Vue 中也可以通过模板字符串的方式进行字符串拼接。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65485d897d4982a6eb2a38e6