ES8 新特性之 String.prototype.padStart/End() 方法和其实际应用-JavaScript中文网-JavaScript教程资源分享门户

ES8 新增了两个字符串方法，分别是 String.prototype.padStart() 和 String.prototype.padEnd()。这两个方法用于在字符串的开头或结尾补全指定长度的字符。

语法

str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])

targetLength：目标长度，必须为整数。
padString：用于补全的字符串，可选。如果不指定，则默认用空格补全。

示例

'1'.padStart(2, '0') // '01'
'10'.padStart(2, '0') // '10'

'1'.padEnd(2, '0') // '10'
'10'.padEnd(2, '0') // '10'

实际应用

1. 日期格式化

在前端开发中，我们经常需要将日期格式化成指定的字符串格式。例如，将 2022-01-01 格式化成 01/01/2022。

使用 padStart() 和 padEnd() 方法可以很方便地实现这个功能。

const date = new Date('2022-01-01')
const year = date.getFullYear().toString()
const month = (date.getMonth() + 1).toString().padStart(2, '0')
const day = date.getDate().toString().padStart(2, '0')

const formattedDate = `${day}/${month}/${year}`
console.log(formattedDate) // '01/01/2022'

2. 数字格式化

在前端开发中，我们有时需要将数字格式化成指定长度的字符串。例如，将数字 123 格式化成 00123。

使用 padStart() 方法可以很方便地实现这个功能。

const num = 123
const formattedNum = num.toString().padStart(5, '0')
console.log(formattedNum) // '00123'

3. 日志输出

在开发调试过程中，我们经常需要输出日志信息。使用 padEnd() 方法可以让日志信息对齐，更加易于阅读。

console.log('INFO'.padEnd(10, ' '), 'This is an info message')
console.log('WARNING'.padEnd(10, ' '), 'This is a warning message')
console.log('ERROR'.padEnd(10, ' '), 'This is an error message')

输出结果：

INFO      This is an info message
WARNING   This is a warning message
ERROR     This is an error message

总结

String.prototype.padStart() 和 String.prototype.padEnd() 方法是 ES8 新增的字符串方法，用于在字符串的开头或结尾补全指定长度的字符。它们在日期格式化、数字格式化和日志输出等场景下有着广泛的应用。掌握这些方法可以让我们的代码更加简洁、高效。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65541bd4d2f5e1655ddc90dc