8. Neue String-Methoden: padStart und padEnd #

Dieses Kapitel erklärt das ECMAScript 2017-Feature „String padding“ von Jordan Harband & Rick Waldron.

8.1 Überblick #

ECMAScript 2017 hat zwei neue String-Methoden

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

8.2 Warum Strings auffüllen? #

Anwendungsfälle für das Auffüllen von Strings umfassen

• Anzeigen tabellarischer Daten in einer Monospace-Schrift.
• Hinzufügen einer Zahl oder einer ID zu einem Dateinamen oder einer URL: 'file 001.txt'
• Ausrichten der Konsolenausgabe: 'Test 001: ✓'
• Ausdrucken von Hexadezimal- oder Binärzahlen mit einer festen Anzahl von Ziffern: '0x00FF'

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

Diese Methode stellt dem Empfänger (eventuell wiederholt) fillString voran, bis seine Länge maxLength erreicht hat.

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

Bei Bedarf wird ein Fragment von fillString verwendet, so dass die Länge des Ergebnisses genau maxLength beträgt.

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

Wenn der Empfänger so lang wie maxLength ist oder länger, wird er unverändert zurückgegeben.

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

Wenn maxLength und fillString.length gleich sind, wird fillString zu einer Maske, in die der Empfänger am Ende eingefügt wird.

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

Wenn Sie fillString weglassen, wird ein String mit einem einzigen Leerzeichen verwendet (' ').

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

8.3.1 Eine einfache Implementierung von padStart() #

Die folgende Implementierung gibt Ihnen eine grobe Vorstellung davon, wie padStart() funktioniert, ist aber (für einige Randfälle) nicht vollständig spec-konform.

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() funktioniert ähnlich wie padStart(), aber anstatt das wiederholte fillString am Anfang einzufügen, fügt es es am Ende ein.

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

Nur die letzte Zeile einer Implementierung von padEnd() unterscheidet sich im Vergleich zur Implementierung von padStart().

return str + truncatedStringFiller;

8.5 FAQ: padStart und padEnd #

8.5.1 Warum heißen die Padding-Methoden nicht padLeft und padRight? #

Für bidirektionale oder rechts-nach-links-Sprachen sind die Begriffe left und right nicht gut geeignet. Daher folgt die Benennung von padStart und padEnd den bestehenden Namen startsWith und endsWith.