Wie formatiere ich Listen wie A, B und C in JavaScript?

Einführung

Wenn Sie Benutzern eine Liste von Elementen anzeigen, müssen Sie diese mit Kommas und einer Konjunktion wie "und" verbinden. Verschiedene Sprachen haben unterschiedliche Konventionen für die Listenformatierung. Englisch verwendet Kommas und "and", Spanisch verwendet "y", Französisch verwendet "et" und Chinesisch verwendet völlig andere Zeichensetzung.

Die Intl.ListFormat-API formatiert Arrays in sprachgerechte Zeichenketten mit den korrekten Trennzeichen und Konjunktionen. Dies berücksichtigt automatisch die kulturellen Unterschiede bei der Listenformatierung.

Das Problem mit manueller Listenformatierung

Sie können Array-Elemente mit Kommas mithilfe der join()-Methode verbinden.

const fruits = ["apples", "oranges", "bananas"];
const list = fruits.join(", ");
console.log(list);
// "apples, oranges, bananas"

Dieser Ansatz hat zwei Probleme. Erstens wird keine Konjunktion vor dem letzten Element hinzugefügt. Zweitens verwendet er englische Zeichensetzung, die für andere Sprachen nicht funktioniert.

Sie könnten manuell "und" vor dem letzten Element hinzufügen.

const fruits = ["apples", "oranges", "bananas"];
const lastFruit = fruits[fruits.length - 1];
const otherFruits = fruits.slice(0, -1);
const list = otherFruits.join(", ") + ", and " + lastFruit;
console.log(list);
// "apples, oranges, and bananas"

Dieser Code funktioniert nur für Englisch. Spanische Benutzer würden "apples, oranges, and bananas" anstelle von "apples, oranges y bananas" sehen. Französische Benutzer würden "and" anstelle von "et" sehen. Die Interpunktions- und Konjunktionsregeln variieren je nach Sprache.

Verwendung von Intl.ListFormat zur Formatierung von Listen

Der Intl.ListFormat-Konstruktor erstellt einen Formatierer, der Arrays in sprachgerechte Listenzeichenketten umwandelt.

const formatter = new Intl.ListFormat("en");
const fruits = ["apples", "oranges", "bananas"];
console.log(formatter.format(fruits));
// "apples, oranges, and bananas"

Der Formatierer verwendet die korrekten Trennzeichen und Konjunktionen für die angegebene Sprache. Sie übergeben die Sprache als erstes Argument an den Konstruktor.

const enFormatter = new Intl.ListFormat("en");
const esFormatter = new Intl.ListFormat("es");
const frFormatter = new Intl.ListFormat("fr");

const fruits = ["apples", "oranges", "bananas"];

console.log(enFormatter.format(fruits));
// "apples, oranges, and bananas"

console.log(esFormatter.format(fruits));
// "apples, oranges y bananas"

console.log(frFormatter.format(fruits));
// "apples, oranges et bananas"

Der Formatierer wendet automatisch die Interpunktions- und Konjunktionsregeln für jede Sprache an.

Formatierung von Listen mit "und"

Das Standardverhalten von Intl.ListFormat verwendet die Konjunktion "und" oder deren Äquivalent in anderen Sprachen. Dies wird als Konjunktionsformatierung bezeichnet.

const formatter = new Intl.ListFormat("en", { type: "conjunction" });
const items = ["bread", "milk", "eggs"];
console.log(formatter.format(items));
// "bread, milk, and eggs"

Die Option type steuert, welcher Konnektor zwischen den Elementen erscheint. Der Wert "conjunction" erzeugt Listen, die "und" verwenden. Dies ist der Standardwert, daher können Sie ihn weglassen.

Verständnis der Listentyp-Optionen

Die Option type akzeptiert drei Werte, die steuern, wie Elemente verbunden werden.

Der Typ "conjunction" verwendet "und" oder dessen Äquivalent.

const formatter = new Intl.ListFormat("en", { type: "conjunction" });
console.log(formatter.format(["red", "green", "blue"]));
// "red, green, and blue"

Der Typ "disjunction" verwendet "oder" oder dessen Äquivalent.

const formatter = new Intl.ListFormat("en", { type: "disjunction" });
console.log(formatter.format(["red", "green", "blue"]));
// "red, green, or blue"

Der Typ "unit" formatiert Listen von Messungen oder Mengen ohne Konjunktion.

const formatter = new Intl.ListFormat("en", { type: "unit" });
console.log(formatter.format(["5 pounds", "12 ounces"]));
// "5 pounds, 12 ounces"

Der Unit-Typ verwendet minimale Interpunktion, die für technische oder Messdaten geeignet ist.

Verständnis der Stil-Optionen

Die Option style steuert die Länge und Formalität der formatierten Ausgabe. Sie akzeptiert drei Werte.

Der Stil "long" verwendet vollständige Wörter und Standardinterpunktion. Dies ist die Standardeinstellung.

const formatter = new Intl.ListFormat("en", { style: "long" });
console.log(formatter.format(["Alice", "Bob", "Carol"]));
// "Alice, Bob, and Carol"

Der Stil "short" verwendet abgekürzte Formen, wenn verfügbar.

const formatter = new Intl.ListFormat("en", { style: "short" });
console.log(formatter.format(["Alice", "Bob", "Carol"]));
// "Alice, Bob, & Carol"

Der Stil "narrow" verwendet die kompakteste mögliche Form.

const formatter = new Intl.ListFormat("en", { style: "narrow" });
console.log(formatter.format(["Alice", "Bob", "Carol"]));
// "Alice, Bob, Carol"

Der schmale Stil lässt die Konjunktion oft vollständig weg. Die genaue Ausgabe hängt von der Locale ab.

Wie verschiedene Sprachgebiete Listen formatieren

Jedes Sprachgebiet hat seine eigenen Regeln für die Listenformatierung. Der Formatierer wendet diese Regeln automatisch an.

Englisch verwendet Kommas und fügt das Oxford-Komma vor "and" ein.

const formatter = new Intl.ListFormat("en");
console.log(formatter.format(["coffee", "tea", "juice"]));
// "coffee, tea, and juice"

Spanisch verwendet Kommas und die Konjunktion "y".

const formatter = new Intl.ListFormat("es");
console.log(formatter.format(["café", "té", "jugo"]));
// "café, té y jugo"

Französisch verwendet Kommas und die Konjunktion "et".

const formatter = new Intl.ListFormat("fr");
console.log(formatter.format(["café", "thé", "jus"]));
// "café, thé et jus"

Chinesisch verwendet das Zeichen 和 für "und" und das Aufzählungskomma 、 als Trennzeichen.

const formatter = new Intl.ListFormat("zh");
console.log(formatter.format(["咖啡", "茶", "可乐"]));
// "咖啡、茶和可乐"

Deutsch verwendet Kommas und die Konjunktion "und".

const formatter = new Intl.ListFormat("de");
console.log(formatter.format(["Kaffee", "Tee", "Saft"]));
// "Kaffee, Tee und Saft"

Der Formatierer behandelt diese Unterschiede, ohne dass Sie die Regeln für jede Sprache kennen müssen.

Einzelne Teile mit formatToParts abrufen

Die Methode formatToParts() gibt ein Array von Objekten zurück, die jeden Teil der formatierten Liste repräsentieren. Dies ist nützlich, wenn Sie verschiedene Teile separat gestalten möchten.

const formatter = new Intl.ListFormat("en");
const parts = formatter.formatToParts(["red", "green", "blue"]);
console.log(parts);

Die Ausgabe ist ein Array von Objekten mit den Eigenschaften type und value.

[
  { type: "element", value: "red" },
  { type: "literal", value: ", " },
  { type: "element", value: "green" },
  { type: "literal", value: ", and " },
  { type: "element", value: "blue" }
]

Jedes Listenelement hat den Typ "element". Die Trennzeichen und Konjunktionen haben den Typ "literal". Sie können dies verwenden, um benutzerdefinierte Formatierungen anzuwenden.

const formatter = new Intl.ListFormat("en");
const parts = formatter.formatToParts(["red", "green", "blue"]);

const html = parts
  .map((part) => {
    if (part.type === "element") {
      return `<strong>${part.value}</strong>`;
    }
    return part.value;
  })
  .join("");

console.log(html);
// "<strong>red</strong>, <strong>green</strong>, and <strong>blue</strong>"

Dieser Ansatz gibt Ihnen präzise Kontrolle über die Formatierung, während sprachgebietsabhängige Trennzeichen und Konjunktionen beibehalten werden.

Browser-Unterstützung

Die Intl.ListFormat-API ist in allen modernen Browsern verfügbar. Sie wird seit April 2021 von allen wichtigen Browsern unterstützt, darunter Chrome, Firefox, Safari und Edge.

Sie können überprüfen, ob die API verfügbar ist, bevor Sie sie verwenden.

if (typeof Intl.ListFormat !== "undefined") {
  const formatter = new Intl.ListFormat("en");
  console.log(formatter.format(["a", "b", "c"]));
} else {
  console.log("Intl.ListFormat is not supported");
}

Für ältere Browser müssen Sie einen Fallback bereitstellen oder ein Polyfill verwenden. Der Fallback kann die einfache join()-Methode verwenden.

function formatList(items, locale) {
  if (typeof Intl.ListFormat !== "undefined") {
    const formatter = new Intl.ListFormat(locale);
    return formatter.format(items);
  }
  return items.join(", ");
}

console.log(formatList(["red", "green", "blue"], "en"));
// "red, green, and blue" (oder "red, green, blue" in älteren Browsern)

Dies stellt sicher, dass Ihr Code auch in Browsern ohne Intl.ListFormat-Unterstützung funktioniert.