Aufzählungen richtig verketten mit Intl.ListFormat
"a, b und c" von Hand zusammenzubauen geht fast immer schief – bei einem Element, bei zwei Elementen, beim letzten Komma. Intl.ListFormat macht es richtig, in jeder Sprache, ganz ohne Bibliothek.
Irgendwann steht in fast jedem Projekt eine Aufzählung im Text: „Anna, Ben und Carla haben zugesagt." Der erste Reflex ist array.join(', ') – und dann fällt auf, dass das „und" fehlt. Also bastelst du das letzte Element von Hand dran. Und dann kommt der Fall mit einem Element, und der mit zwei, und plötzlich steht da „Anna und " oder „Anna, und Ben". Diese Sonderfälle löst der Browser längst selbst.
Der eingebaute Weg
Intl.ListFormat gehört zur Intl-Familie, ist überall dabei und braucht keine Bibliothek:
const namen = ['Anna', 'Ben', 'Carla'];
// Aufzählung mit "und"
const und = new Intl.ListFormat('de-DE', { style: 'long', type: 'conjunction' });
und.format(namen); // "Anna, Ben und Carla"
// Auswahl mit "oder"
const oder = new Intl.ListFormat('de-DE', { type: 'disjunction' });
oder.format(namen); // "Anna, Ben oder Carla"Der Clou: Die Sonderfälle sind schon richtig. Ein Element bleibt einfach stehen, zwei werden ohne Komma verbunden – genau so, wie man es schreibt:
und.format(['Anna']); // "Anna"
und.format(['Anna', 'Ben']); // "Anna und Ben"Und weil die Regel in der Sprache steckt, nicht in deinem Code, stimmt sie auch anderswo. Englisch setzt das Oxford-Komma, Deutsch nicht – darum musst du dich nicht kümmern:
new Intl.ListFormat('en-US').format(namen); // "Anna, Ben, and Carla"Wenn du die Teile einzeln brauchst
Willst du die einzelnen Namen im Markup hervorheben, gibt dir formatToParts die Bausteine getrennt zurück – element sind die Werte, literal die Trennstücke wie „, " und „ und ":
und.formatToParts(namen);
// [{type:'element', value:'Anna'}, {type:'literal', value:', '},
// {type:'element', value:'Ben'}, {type:'literal', value:' und '},
// {type:'element', value:'Carla'}]Damit baust du dir sauber ein <b>Anna</b>, <b>Ben</b> und <b>Carla</b>, ohne selbst nach dem letzten Komma zu suchen.
Der type kennt neben conjunction (und) und disjunction (oder) noch unit für Maßangaben („3 m, 50 cm"). Über style (long, short, narrow) wird die Verbindung kürzer, wenn der Platz knapp ist. Eine eigene Formatierung dafür zu schreiben, lohnt sich praktisch nie – der Browser kann es besser und in mehr Sprachen, als ich je testen würde.
Solche Kleinigkeiten sind der Unterschied zwischen „funktioniert" und „fühlt sich fertig an". Genau darauf achte ich, wenn ich Websites baue – mehr dazu auf bymw.de.
Quellen
Du brauchst mehr als ein Snippet?
Ich entwickle Android-Apps in Kotlin und moderne Websites für Selbstständige und kleine Unternehmen — von der ersten Idee bis zum Release.
Projekt anfragen →Verwandte Snippets
requestAnimationFrame – die Animationsschleife, die zum Bildschirm passt
setInterval(schritt, 16) läuft auf einem 144-Hz-Monitor anders als auf einem alten Handy – und im Hintergrundtab einfach weiter. requestAnimationFrame löst beides, wenn man die verstrichene Zeit mitrechnet statt Bilder zu zählen.
Set und Map in JavaScript – doppelte Einträge loswerden und richtig zählen
Ein Objekt als Nachschlagetabelle geht – bis der Schlüssel eine Zahl ist, oder ein Objekt, oder zufällig "constructor" heißt. Set und Map machen genau das, wofür man Objekte bisher zweckentfremdet hat, nur ohne die Überraschungen.
ResizeObserver – auf die Größe eines Elements reagieren, nicht auf die des Fensters
window.onresize feuert nur, wenn sich das Fenster ändert – nicht, wenn eine Seitenleiste aufklappt oder Text nachlädt. ResizeObserver meldet dir die Größe des Elements selbst, und zwar ohne Endlosschleife.