在前端开发中，经常会遇到需要对字符串进行补全的情况，例如需要将数字格式化为指定宽度的字符串，或者需要对齐多个字符串等等。在 ES7 中，提供了 String.prototype.padStart() 和 String.prototype.padEnd() 两个方法，可以帮助我们方便地对字符串进行补全。
String.prototype.padStart()
String.prototype.padStart() 方法可以在字符串开头添加填充字符，直到字符串达到指定的长度。方法接受两个参数：
- targetLength：目标长度，最终字符串的长度将达到这个数字。
- padString（可选）：填充字符串，用于向原始字符串添加填充字符的字符串。默认值是一个空字符串。
下面是一个简单的示例：
const str = '123'; console.log(str.padStart(5, '0')); // '00123'
上面的代码中，字符串 '123' 会添加两个 '0' 字符，使得字符串最终达到长度为 5。
如果不传入填充字符串，方法会默认使用空字符串进行填充：
const str = 'abc'; console.log(str.padStart(6)); // ' abc'
String.prototype.padEnd()
String.prototype.padEnd() 方法可以在字符串结尾添加填充字符，直到字符串达到指定的长度。方法的参数与 String.prototype.padStart() 方法一样。
下面是一个简单的示例：
const str = 'hello'; console.log(str.padEnd(10, '!')); // 'hello!!!!!'
上面的代码中，字符串 'hello' 会添加 5 个 '!' 字符，使得字符串最终达到长度为 10。
同样地，如果不传入填充字符串，方法会默认使用空字符串进行填充：
const str = 'xyz'; console.log(str.padEnd(7)); // 'xyz '
注意事项
需要注意的是，String.prototype.padStart() 和 String.prototype.padEnd() 方法都不会改变原始字符串，而是返回一个新的字符串。如果指定的长度小于或等于原始字符串的长度，则不会进行任何操作，直接返回原始字符串。
这两个方法都是 ES7 提供的新特性，如果要在老版本的浏览器中使用，需要使用 polyfill 进行填充。
总结
在本篇文章中，我们介绍了 ES7 的 String.prototype.padStart() 和 String.prototype.padEnd() 两个方法，这两个方法可以很方便地对字符串进行补全操作。需要注意的是，这两个方法不会改变原始字符串，而是返回一个新的字符串。在实际应用中，可以根据需要选择使用这两个方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a8f0a9add4f0e0ff234a5c