JS字符串補全方法padStart()和padEnd()

這個方法無心中看到的，感受仍是蠻實用的，特此分享一波。我想你們都會有遇到將時間戳轉換成時間格式的時候，時間或日期不足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);
        }
    };
}