8. 新しい文字列メソッド: padStart と padEnd #

この章では、Jordan Harband 氏と Rick Waldron 氏による ECMAScript 2017 の「文字列パディング」機能について説明します。

8.1 概要 #

ECMAScript 2017 には 2 つの新しい文字列メソッドがあります。

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

8.2 文字列をパディングする理由 #

文字列をパディングするユースケースには以下が含まれます。

• モノスペースフォントで表データを連続的に表示する。
• ファイル名または URL にカウントまたは ID を追加する: 'file 001.txt'
• コンソール出力を整列する: 'Test 001: ✓'
• 固定桁数を持つ 16 進数または 2 進数を出力する: '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 を省略すると、スペースが 1 つある文字列 (' ') が使用されます。

> '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  '

padEnd() の実装は最後の行のみが padStart() の実装とは異なります。

return str + truncatedStringFiller;

8.5 よくある質問: padStart と padEnd #

8.5.1 パディングメソッドが padLeft と padRight と呼ばれないのはなぜですか? #

双方向または右から左の言語では、left と right という用語は適切に機能しません。したがって、padStart と padEnd の命名は、既存の名前の startsWith と endsWith に従っています。