长度补全:padStart()、padEnd()

在ES6中，我们可以使用padStart()和padEnd()这两个方法来实现字符串的长度补全。如果某个字符串的长度未达到指定长度，padStart()会在头部进行补全，而padEnd()会在尾部进行补全。

语法

str.padStart(len,str)
str.padEnd(len,str)

说明

padStart()和padEnd()都有两个参数。len是必选参数，用于指定字符串的长度。str是可选参数，表示用来补全的字符串。当str省路时，表示使用空格来补全。

此外，这两种方法最后都会返回补全后的字符串。

示例 参数str不省略

const str = 'HTML'
const result1 = str.padStart(8, '0')
console.log(result1)
const result2 = str.padEnd(8, '0')
console.log(result2)

>>> 0000HTML
>>> HTML0000

示例 参数str省略

const str = 'HTML'
const result1 = str.padStart(8)
console.log(result1)
console.log(result1.length)
const result2 = str.padEnd(8)
console.log(result2)
console.log(result2.length)

>>>     HTML
>>> 8
>>> HTML    
>>> 8

分析

可能小伙伴会问:“感觉padStart()和padEnd()没有什么用，对字符串进行长度补全有什么意义呢?〞实际上ES6并不会无缘无故新增一些没有用的方法，来增加用户记忆顶担。如果新增了方法，那么新增的方法肯定有它的作用。

-个可能的应用场景是，在实际开发中，我们在处理日期和时间时，会遇到这样一种需求:月份或日数不满2位数的，需要在前面补一个0。例如，“2020-5-1”应该补全为“2020-05-01”而“2020-10-1〞应该补全为“2020-10-01”，以此类推。

示例:传统方式

const d = new Date()
// 获取年月日
const year = d.getFullYear()
let month = d.getMonth() + 1
let day = d.getDate()
console.log(year, month, day) // 2023 9 18
// 处理日期
month = month < 10 ? '0' + month : month
day = day < 10 ? '0' + day : day
console.log(month, day)     // 09 18

>>> 2023 9 18
>>> 09 18

分析

从上面的代码中可以看出，使用传统方式来实现日期的补全是比较麻烦的。但是使用padStart()和padEnd()来实现，就再简单不过了，请看下面的例子。

示例:使用padStart()和padEnd()

const d = new Date()
// 获取年、月、日
const year = d.getFullYear()
let month = (d.getMonth() + 1).toString().padStart(2, '0')
let day = d.getDate().toString().padStart(2, '0')
const time = `${year}-${month}-${day}`
console.log(time)   // 2023-09-19

>>> 2023-09-19

分析