ES6+ padStart()

1. 前言

本節(jié)介紹 ES6 的字符串新增方法 padStart，該方法是字符串補(bǔ)全長度的方法，如果某個(gè)字符串不夠指定的字符串長度，可以使用此方法在字符串左側(cè)開始位置進(jìn)行補(bǔ)全。

2. 方法詳情

padStart() 在原字符串開頭填充指定的填充字符串直到目標(biāo)長度并返回一個(gè)新的字符串，不會對原字符串進(jìn)行修改。

使用語法：

str.padStart(targetLength [, padString])

參數(shù)說明：

3. 使用場景

1. 擴(kuò)展字符串長度；
2. 設(shè)置指定字符串的長度；
3. 補(bǔ)全日期的時(shí)候會更加方便。

4. 實(shí)例

1. 拼接字符串。

"imooc".padStart(10, 'ilove')    // "iloveimooc" 

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

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

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

'imooc'.padStart(7, 'abc') // 'abimooc'

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

'imooc'.padStart(9, 'ab') // 'ababimooc'
'imooc'.padStart(10, 'ab') // 'ababaimooc'

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

'imooc'.padStart('7')   // '  imooc'

5. 場景實(shí)例（補(bǔ)全日期）

通常情況下用的比較多的就是在時(shí)間或者日期前面的補(bǔ) 0，比如：2020-06-03，但是通常我們使用時(shí)間戳獲取日月時(shí)，是沒有前面的 0 的，如：

var month = new Date().getMonth() + 1;  // 6

這個(gè)時(shí)候獲取的是 2，沒有前面的 0，如果我們想在月份前面加 0 需要進(jìn)行邏輯判斷，我們可以寫這樣一個(gè)函數(shù)來統(tǒng)一處理實(shí)現(xiàn)。

function getMonth(m) {
  return m < 10 ? `0${m}` : m;
}

當(dāng) m 小于 10 的時(shí)候，我們會在前面添加一個(gè) 0，否則直接返回 m 的值，雖然這樣可以實(shí)現(xiàn)，但是這里多了一個(gè)函數(shù)，現(xiàn)在有了 padStart 就會很容易了。

var month = String(new Date().getMonth() + 1).padStart(2, '0');	// 06
var date = String(new Date().getDate()).padStart(2, '0'); 			// 03

String() 函數(shù)對日期進(jìn)行類型轉(zhuǎn)換的作用，轉(zhuǎn)換為字符串進(jìn)行操作。

6. 小結(jié)

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

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