ES6+ padStart()

1. 前言

本節介紹 ES6 的字符串新增方法 padStart，該方法是字符串補全長度的方法，如果某個字符串不夠指定的字符串長度，可以使用此方法在字符串左側開始位置進行補全。

2. 方法詳情

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

使用語法：

str.padStart(targetLength [, padString])

參數說明：

3. 使用場景

1. 擴展字符串長度；
2. 設置指定字符串的長度；
3. 補全日期的時候會更加方便。

4. 實例

1. 拼接字符串。

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

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

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

3. 如果補全的字符串和原字符串的長度大于目標（targetLength）的長度，補全的字符串會被截取。

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

4. 如果補全的字符串和原字符串的長度小于目標（targetLength）的長度，補全的字符串會被重復，多余的部分會被裁剪。

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

5. 如果省略第二個參數，默認使用空格補全長度。

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

5. 場景實例（補全日期）

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

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

這個時候獲取的是 2，沒有前面的 0，如果我們想在月份前面加 0 需要進行邏輯判斷，我們可以寫這樣一個函數來統一處理實現。

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

當 m 小于 10 的時候，我們會在前面添加一個 0，否則直接返回 m 的值，雖然這樣可以實現，但是這里多了一個函數，現在有了 padStart 就會很容易了。

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

String() 函數對日期進行類型轉換的作用，轉換為字符串進行操作。

6. 小結

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

• 該方法不會對原字符串進行修改；
• 在沒有第二個參數時，則用空格填充；
• 在實戰中使用在日期前的補充會使代碼變得非常簡潔。