在 ES9 中，新增了字符串 padding 的特性。它可以让我们更方便地处理字符串长度的问题，比如想要一个字符串在前面或后面补齐一定数量的空格或其他字符，这个新特性就可以轻松实现。
padStart() 和 padEnd() 方法
ES9 新增的字符串 padding 特性包括了两个方法：padStart() 和 padEnd()。这两个方法分别用于在字符串的开头和结尾添加指定的字符，直到字符串达到指定的长度为止。
padStart()
padStart() 方法接受两个参数：添加的字符与目标长度。如果源字符串长度小于目标长度，则会在字符串前添加指定的字符直到字符串达到目标长度。如果指定的字符长度大于等于目标长度，会返回指定的字符串。
const str = 'hello'; console.log(str.padStart(10, 'x')); // "xxxxhello" console.log(str.padStart(5, 'x')); // "hello"
padStart() 方法也可以不传递第二个参数，它将默认用空格字符进行填充。
const str = 'world'; console.log(str.padStart(10)); // " world"
padEnd()
padEnd() 方法与 padStart() 方法类似，不同之处是它会在字符串的结尾添加指定的字符直到字符串达到目标长度。
const str = 'Javascript'; console.log(str.padEnd(15, '-')); // "Javascript----" console.log(str.padEnd(10, '-')); // "Javascript" console.log(str.padEnd(6, '-')); // "Javascript"
同样地，如果不传递第二个参数，则默认用空格进行填充。
const str = 'ES9'; console.log(str.padEnd(6)); // "ES9 "
应用场景
字符串 padding 特性的应用场景很多，其中一些场景如下：
输出对齐
在前端开发中，经常需要将一些输出对齐。例如，需要将一些 table 的每个单元格对齐，或者对齐一些表单的 label。
使用 padStart() 和 padEnd() 方法可以很轻松地实现这个效果。
-- -------------------- ---- ------- ----- --------- - - - ----- -------- ---- --- ------- ---- -- - ----- ------- ---- --- ------- ---- -- - ----- ------ ---- --- ------- ---- - -- ----------------- --- --------- ---------------------- -- - ----- - ----- ---- ------ - - ----- --------------------------- ------------------------- ----------------------------- --
输出结果：
Name Age Salary Lucas 25 1000 Mike 26 2000 Eva 24 1500
生成唯一 ID
在前端开发中，我们经常需要生成唯一的 ID。使用字符串 padding 特性可以轻松实现这个效果。
-- -------------------- ---- ------- ----- -------- - ------- - --- -- - ----- --------- - ---- ----------------------------- ----- ------------ - ---------------------------------------- ----- --------- - ----------------- - ---------------- - --------------------- ------ ------------------------------------------ - ------------------------ -- ------------------------
以上代码将会生成 10 位的唯一 ID，其中包含了当前时间戳和一个 5 位的随机字符串。如果当前时间戳和随机字符串组合后长度小于目标长度，则使用 padStart() 方法在字符串开头添加零直到达到目标长度。
结论
字符串 padding 特性的引入添了很多方便性，我们可以轻松地控制字符串长度和对齐格式。在处理字符串长度的应用场景中，padStart() 和 padEnd() 方法都会派上用场。该特性对字符串处理和前端开发非常有指导意义，是值得掌握和学习的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671681d8ad1e889fe21ccfe6