在前端开发中，字符串填充是一种常用的技术。ES9中引入了新的字符串填充方法，可以使开发者更加方便地进行字符串的填充和格式化。本文将详细介绍ES9中的字符串填充技巧，并提供示例代码，帮助读者快速理解和使用该技术。
一、ES9中的字符串填充方法
ES9中引入了两种新的字符串填充方法：padStart()和padEnd()。
1. padStart()
padStart()方法可以在字符串的前面添加指定数量的字符，以达到指定字符串长度。该方法接受两个参数：填充后的字符串长度和用于填充的字符。如果填充后字符串长度小于原字符串长度，则不会填充。
let str = 'hello'; str = str.padStart(8, 'a'); console.log(str); // 输出：aaahello
2. padEnd()
padEnd()方法可以在字符串的后面添加指定数量的字符，以达到指定字符串长度。该方法接受两个参数：填充后的字符串长度和用于填充的字符。如果填充后字符串长度小于原字符串长度，则不会填充。
let str = 'hello'; str = str.padEnd(8, 'a'); console.log(str); // 输出：helloaaa
二、字符串填充的应用场景
字符串填充在前端开发中有着广泛的应用场景，如以下几个例子：
1. 定长输出
在表格输出等场景中，为了让表格整齐，需要保证列的宽度是固定的。如果数据不够宽度，则需要填充一些占位符。此时，padStart()和padEnd()方法可以提供很好的解决方案。
-- -------------------- ---- ------- --- ---- - - ------ ------- ---- ---- ------ ------- ---- ---- ------ ------- ---- ---- -- ----------------------------- - ------- --- ---- ---- -- ----- - -------------------------------- - ---------- -
输出结果：
Name Age Mark 25 Lucy 30 John 28
2. 清除字符串中的空格
使用trim()方法可以清除字符串开头和结尾的空格。但是，在某些场景下我们需要清除字符串中间的空格。此时，可以使用replace()方法替换空格字符，再使用padStart()和padEnd()方法填充字符。
let str = 'Hello World! Welcome to China!'; str = str.replace(/\s+/g, ''); str = str.padStart(50, '-').padEnd(60, '-'); console.log(str);
输出结果：
---------------HelloWorld!WelcometoChina!----------------
3. 数字格式化
在一些场景中，需要对数字进行格式化，比如小数点后保留两位，千分位添加逗号等。此时，padStart()和padEnd()方法可以辅助完成数字格式化的工作。
let num = 1234567890.12345; num = num.toFixed(2); // 保留两位小数 num = num.padStart(15, '0'); // 前面填充0，总长度为15 console.log(num);
输出结果：
0001234567890.12
三、字符串填充的注意事项
在使用padStart()和padEnd()方法时，需要注意以下几点：
- 传入的填充字符必须是一个字符，如果是多个字符，则只会取第一个字符作为填充字符。
- 当原字符串长度已经达到或超过填充后的字符串长度时，方法不会对原字符串做任何处理。
- 当填充字符加上原字符串长度已经超过填充后的字符串长度时，方法会截断填充字符，使填充后的字符串长度等于指定长度。
四、总结
ES9中的padStart()和padEnd()方法为字符串的填充和格式化提供了更加便捷的解决方案。本文详细介绍了它们的用法和应用场景，并提供了示例代码。读者可以根据自己的需求使用这些技术，提高前端开发效率，优化用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a0538dadd4f0e0ff8b15fc