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

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

本章解释了由 Jordan Harband 和 Rick Waldron 提出的 ECMAScript 2017 特性“字符串填充”。

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()