在前端开发中，我们经常需要对字符串进行格式化。在 ES8 中，新增了两个字符串填充方法 padStart 和 padEnd，可以帮助我们更方便地处理字符串格式问题。
padStart 和 padEnd 方法
padStart 和 padEnd 方法都接收两个参数：第一个参数是填充后的字符串总长度，第二个参数是用于填充的字符串。
以 padStart 方法为例：
'abc'.padStart(6, '0') // '000abc'
这个例子中，'abc' 被填充为长度为 6 的字符串，填充用的字符串是 '0'。
padEnd 方法的用法和 padStart 类似，只是填充的位置不同。
'abc'.padEnd(6, '0') // 'abc000'
深入了解 padStart 和 padEnd 方法
padStart 和 padEnd 方法可以帮助我们解决字符串格式问题，但是它们的实现原理是什么呢？
padStart 和 padEnd 方法的实现都是基于 Unicode 字符编码的。当填充用的字符串长度不足时，会重复这个字符串，直到填充完为止。如果填充用的字符串长度超过了总长度，会截取字符串的一部分作为填充用的字符串。
例如，当填充用的字符串是 '你好'，总长度是 6 时：
'abc'.padStart(6, '你好') // '你好你abc'
这个例子中，填充用的字符串 '你好' 长度为 2，不足以填充到总长度 6，因此会重复这个字符串，直到填充完为止。
padStart 和 padEnd 方法的应用
padStart 和 padEnd 方法可以应用到很多场景中，例如：
1. 数字前置填充
当我们需要将数字格式化为固定长度的字符串时，可以使用 padStart 方法。
const num = 123 const str = num.toString().padStart(5, '0') console.log(str) // '00123'
这个例子中，数字 123 被转换为字符串 '123'，然后使用 padStart 方法将其填充为长度为 5 的字符串。
2. 表格对齐
当我们需要在控制台输出表格时，可以使用 padEnd 方法将字符串对齐。
// javascriptcn.com 代码示例
const data = [
{ name: 'Tom', age: 20, address: 'Beijing' },
{ name: 'Jerry', age: 18, address: 'Shanghai' },
{ name: 'Lucy', age: 22, address: 'Guangzhou' }
]
console.log('Name\tAge\tAddress')
data.forEach(item => {
console.log(`${item.name.padEnd(8)}${item.age.toString().padEnd(4)}${item.address}`)
})这个例子中，我们使用 padEnd 方法将每个字符串对齐，输出一个简单的表格。
总结
ES8 中新增的 padStart 和 padEnd 方法可以帮助我们更方便地处理字符串格式问题。它们的实现原理是基于 Unicode 字符编码的，可以应用到很多场景中，例如数字前置填充和表格对齐。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658174a6d2f5e1655dcaf16c