8. 新字串方法：padStart 和 padEnd

8. 新字串方法：`padStart` 和 `padEnd`

本章節說明 ECMAScript 2017 的功能「字串填充」，由 Jordan Harband 和 Rick Waldron 所提出。

8.1 概觀

ECMAScript 2017 有兩個新的字串方法

> 'x'.padStart(5, 'ab')
'ababx'
> 'x'.padEnd(5, 'ab')
'xabab'

8.2 為什麼要填充字串？

填充字串的用例包括

以等寬字體顯示表格資料。
在檔案名稱或 URL 中加入計數或 ID：'file 001.txt'
對齊主控台輸出：'Test 001: ✓'
印出具有固定位數的十六進位或二進位數字：'0x00FF'

8.3 `String.prototype.padStart(maxLength, fillString=' ')`

此方法（可能重複）以 fillString 為字串開頭，直到其長度為 maxLength

> 'x'.padStart(5, 'ab')
'ababx'

如果需要，會使用 fillString 的片段，使結果長度剛好為 maxLength

> 'x'.padStart(4, 'ab')
'abax'

如果字串長度等於或大於 maxLength，則會回傳不變更的字串

> 'abcd'.padStart(2, '#')
'abcd'

如果 maxLength 和 fillString.length 相同，則 fillString 會變成一個遮罩，字串會插入其中，在最後面

> 'abc'.padStart(10, '0123456789')
'0123456abc'

如果省略 fillString，則會使用一個只有一個空白的字串（' '）

> 'x'.padStart(3)
'  x'

8.3.1 `padStart()` 的簡單實作

以下實作讓您大致了解 padStart() 的運作方式，但並未完全符合規格（對於一些特殊情況）。

String.prototype.padStart =
function (maxLength, fillString=' ') {
    let str = String(this);
    if (str.length >= maxLength) {
        return str;
    }

    fillString = String(fillString);
    if (fillString.length === 0) {
        fillString = ' ';
    }

    let fillLen = maxLength - str.length;
    let timesToRepeat = Math.ceil(fillLen / fillString.length);
    let truncatedStringFiller = fillString
        .repeat(timesToRepeat)
        .slice(0, fillLen);
    return truncatedStringFiller + str;
};

8.4 `String.prototype.padEnd(maxLength, fillString=' ')`

padEnd() 的運作方式與 padStart() 類似，但它並非在開頭插入重複的 fillString，而是將其插入結尾

> 'x'.padEnd(5, 'ab')
'xabab'
> 'x'.padEnd(4, 'ab')
'xaba'
> 'abcd'.padEnd(2, '#')
'abcd'
> 'abc'.padEnd(10, '0123456789')
'abc0123456'
> 'x'.padEnd(3)
'x  '

與 padStart() 的實作相比，padEnd() 實作中只有最後一行不同

return str + truncatedStringFiller;

8.5 常見問題：`padStart` 和 `padEnd`

8.5.1 為何填充方法不稱為 `padLeft` 和 `padRight`？

對於雙向或由右至左的語言，left 和 right 這兩個詞彙並不適用。因此，padStart 和 padEnd 的命名方式遵循現有的名稱 startsWith 和 endsWith。

下一頁：9. Object.getOwnPropertyDescriptors()