ES6+ padEnd()

1. 前言

本節(jié)介紹 ES6 的字符串新增方法 padEnd 和 padStart 一樣也是補(bǔ)全字符串的長(zhǎng)度的，但是它的補(bǔ)全位置是在原字符串的右側(cè)末尾進(jìn)行補(bǔ)全的。此方法會(huì)返回一個(gè)新的字符串，不會(huì)對(duì)原字符串進(jìn)行修改。

2. 方法詳情

padEnd() 在原字符串末尾填充指定的填充字符串直到目標(biāo)長(zhǎng)度并返回一個(gè)新的字符串，不會(huì)對(duì)原字符串進(jìn)行修改。

使用語(yǔ)法：

str.padEnd(targetLength [, padString])

參數(shù)說(shuō)明：

3. 使用場(chǎng)景

1. 擴(kuò)展字符串長(zhǎng)度
2. 設(shè)置指定字符串的長(zhǎng)度
3. 在實(shí)戰(zhàn)中補(bǔ)全時(shí)間戳的毫秒

4. 實(shí)例

1. 拼接字符串。

"imooc".padEnd(10, 'ilove')    // "imoocilove" 

2. 如果原字符串的長(zhǎng)度，等于或小于最大長(zhǎng)度，則字符串補(bǔ)全不生效，返回原字符串。

'imooc'.padEnd(5, 'ab') // 'imooc'
'imooc'.padEnd(2, 'ab') // 'imooc'

3. 如果補(bǔ)全的字符串和原字符串的長(zhǎng)度大于目標(biāo)（targetLength）的長(zhǎng)度，補(bǔ)全的字符串會(huì)被截取。

'imooc'.padEnd(7, 'abc') // 'imoocab'

4. 如果補(bǔ)全的字符串和原字符串的長(zhǎng)度小于目標(biāo)（targetLength）的長(zhǎng)度，補(bǔ)全的字符串會(huì)被重復(fù)，多余的部分會(huì)被裁剪。

'imooc'.padEnd(9, 'ab') // 'imoocabab'
'imooc'.padEnd(10, 'ab') // 'imoocababa'

5. 如果省略第二個(gè)參數(shù)，默認(rèn)使用空格補(bǔ)全長(zhǎng)度。

'imooc'.padEnd('7')   // 'imooc  '

5. 場(chǎng)景實(shí)例（補(bǔ)全時(shí)間戳的毫秒）

有時(shí)候我們處理后端返回的時(shí)間戳數(shù)據(jù)的時(shí)候，會(huì)發(fā)現(xiàn)很多都是秒，是 10 位，這主要是因?yàn)閿?shù)據(jù)庫(kù)存儲(chǔ)的問(wèn)題。這時(shí)候我們需要補(bǔ)全到毫秒，可以借助 padEnd 來(lái)進(jìn)行補(bǔ)全操作。如下：

let timestamp = 1581828518
timestamp = String(timestamp).padEnd(13, '0'); // 1581828518000

String() 函數(shù)對(duì)時(shí)間戳 timestamp 進(jìn)行類型轉(zhuǎn)換，轉(zhuǎn)換為字符串進(jìn)行操作。

6. 小結(jié)

本節(jié)講解了字符串的 padEnd() 方法的使用，需要注意以下幾點(diǎn)：

• 該方法不會(huì)對(duì)原字符串進(jìn)行修改；
• 在沒(méi)有第二個(gè)參數(shù)時(shí)，則用空格填充；
• 在實(shí)戰(zhàn)中使用在補(bǔ)全時(shí)間戳的毫秒中會(huì)使代碼變得非常簡(jiǎn)潔。