這個方法無意中看到的，感覺還是蠻實用的，特此分享一波。我想大家都會有遇到將時間戳轉換成時間格式的時候，時間或日期不足2位的前面補0。有了今天說的這個東西，就又可以少寫幾行程式碼了，大家在專案中遇到類似場景可以去使用感受下。

ES2017 引入了字串補全長度的功能。如果某個字串不夠指定長度，會在頭部或尾部補全。

padStart() padEnd() 方法用另一個字串填充當前字串(如果需要的話則重複填充)，返回填充後達到指定長度的字串。
padStart() 從當前字串的開始(左側) 位置填充。
padEnd() 從當前字串的末尾（右側）開始填充。

語法：

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

padStart() 和 padEnd() 一共接受兩個引數，第一個引數 targetLength 是當前字串需要填充到的目標長度，第二個引數 padString 是用來填充的字串，預設值為" "。

返回值：

在原字串開頭填充指定的填充字串直到目標長度所形成的新字串。

如果 targetLength 小於當前字串的長度，則字串補全不生效，返回當前字串本身。

'abc'.padStart(1,'d');     // "abc"
'abc'.padEnd(1,'d');     // "abc"

如果 targetLength 小於用來填充的字串長度與原字串的長度之和，則截掉超出位數的補全字串。

'abc'.padStart(6,"123456");    // "123abc"
'abc'.padEnd(6,"123456");    // "abc123"

如果省略第二個引數 padString，即使用空格補全長度。

'abc'.padStart(10);     // "    abc"
'abc'.padEnd(10);     // "abc    "

如果 padString 長度過長，則會刪除後面多出的字串。

'abc'.padStart(5,"foo");    // "foabc"
'abc'.padEnd(5,"foo");     // "abcfo"

應用：

• 補全指定位數，如格式化時間或日期時，個位數補0
• 提示字串格式 字串拼接

示例：

當我們使用時間戳並轉換成 yyyy-mm-dd hh:mm:ss 的格式。

function dataFormat(data) {
  const dt = new Date(data * 1000) //注：如果是13位時間戳不用*1000 
  
  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2,'0')
  const d = (dt.getDay() + '').padStart(2,'0')
​
  const hh = (dt.getHours() + '').padStart(2,'0')
  const mm = (dt.getMinutes() + '').padStart(2,'0')
  const ss = (dt.getSeconds() + '').padStart(2,'0')
​
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}

因著此方法是ES6新增方法，部分瀏覽器不支援，會有相容性問題。 檢視 Polyfill 建立的String.prototype.padStart() / String.prototype.padEnd() 方法。

// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd
if (!String.prototype.padEnd) {
  String.prototype.padEnd = function padEnd(targetLength,padString) {
    targetLength = targetLength>>0; //floor if number or convert non-number to 0;
    padString = String((typeof padString !== 'undefined' ? padString: ''));
    if (this.length > targetLength) {
      return String(this);
    }
    else {
      targetLength = targetLength-this.length;
      if (targetLength > padString.length) {
        padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
      }
      return String(this) + padString.slice(0,targetLength);
    }
  };
}

到此這篇關於JS字串補全方法padStart()和padEnd()的文章就介紹到這了,更多相關JS padStart() padEnd()內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！