Wie man Zahlen in JavaScript auffüllt
JavaScript kennt seit der Version ES2017 die beiden neuen Funktionen padStart und padEnd, um Zeichenketten von links beziehungsweise von rechts aufzufüllen. Damit sie mit Zahlen funktionieren, müssen diese zuvor mit toString in Zeichenketten umgewandelt werden.
- Golo Roden
Gelegentlich müssen Zahlen in JavaScript aufgefüllt werden, beispielsweise mit Leerzeichen oder führenden Nullen. Das kann unter anderem in CLIs hilfreich sein, wenn man Zahlen in tabellarischer Form ausgeben will. JavaScript enthält seit ECMAScript 2017 serienmäßig geeignete Funktionen für diesen Zweck.
In der Vergangenheit war das Auffüllen von Zahlen und Zeichenketten in JavaScript immer etwas umständlich. Man konnte mit der Konkatenation von Zeichenketten arbeiten oder alternativ die slice-Funktion verwenden. Machbar war das alles – schön war keine der Varianten.
Seit ECMAScript 2017 gibt es nun für ebendiesen Zweck die beiden neuen Funktionen padStart und padEnd, die eine Zeichenkette von links beziehungsweise rechts auffüllen. Zur Verfügung stehen die beiden Funktionen laut caniuse.com in allen gängigen Webbrowsern mit Ausnahme des Internet Explorer 11.
Die Funktionsweise ist rasch erklärt: Ist ein Text wie Hallo gegeben, kann man die Funktionen zum Beispiel verwenden, um den Text mit Leerzeichen auf eine Länge von 10 Zeichen aufzufüllen:
'use strict';
const text = 'Hallo';
console.log(text.padStart(10));
// => ' Hallo'
console.log(text.padEnd(10));
// => 'Hallo '
Übergibt man als zweiten Parameter eine Zeichenkette, verwenden die Funktionen diese Zeichenkette zum Auffüllen. Bemerkenswert ist, dass das auch mit mehr als einem Zeichen funktioniert:
console.log(text.padStart(10, '.');
// => '.....Hallo'
console.log(text.padEnd(10, '.:');
// => 'Hallo.:.:.'
Ist die gewünschte Länge kürzer als der bereits vorgegebene Text, kürzen die Funktionen den Text nicht, sondern geben ihn in unveränderter Form zurück. Da die neuen Funktionen auf dem String-Prototyp definiert sind, funktionieren sie mit Zahlen nicht, zumindest nicht ohne vorherige Konvertierung. Diese lässt sich aber leicht mit toString durchführen:
const pi = 3.14;
console.log(pi.toString().padStart(10));
// => ' 3.14'
Die Funktionen padStart und padEnd sind eher unscheinbare Neuerungen in ECMAScript 2017, sind in der Praxis aber enorm hilfreich und helfen, regelmäßig einige Zeilen Code zu sparen, beziehungsweise tragen dazu bei, schlecht lesbaren Code kürzer und lesbarer zu gestalten.
tl;dr: JavaScript kennt seit der Version ES2017 die beiden neuen Funktionen padStart und padEnd, um Zeichenketten von links beziehungsweise von rechts aufzufüllen. Damit sie mit Zahlen funktionieren, müssen diese zuvor mit toString in Zeichenketten umgewandelt werden. ()
