Wie formatiere ich Arrays mit gebietsschemaspezifischen Trennzeichen in JavaScript?

Verwenden Sie Intl.ListFormat, um automatisch die korrekten Kommas, Leerzeichen und Satzzeichen für jede Sprache anzuwenden.

Einführung

Wenn Sie ein Array in eine lesbare Zeichenkette umwandeln, müssen Sie die Elemente mit Kommas oder anderen Satzzeichen trennen. Verschiedene Sprachen verwenden unterschiedliche Trennzeichen. Englisch verwendet Kommas und Leerzeichen, Japanisch verwendet das Aufzählungskomma 、 und Arabisch verwendet andere Satzzeichen und Wortreihenfolgen.

Die Intl.ListFormat-API konvertiert Arrays in Zeichenketten mit gebietsschemagerechten Trennzeichen. Dies stellt sicher, dass Ihre Listen für Benutzer in jeder Sprache natürlich aussehen.

Warum sich Array-Trennzeichen je nach Gebietsschema unterscheiden

Sie könnten annehmen, dass alle Sprachen Kommas zur Trennung von Listenelementen verwenden. Dies ist nicht korrekt.

Englisch trennt Elemente mit einem Komma und Leerzeichen.

// English: "red, green, blue"

Japanisch verwendet das Aufzählungskomma 、 ohne Leerzeichen.

// Japanese: "赤、緑、青"

Chinesisch verwendet dasselbe Aufzählungskomma-Zeichen 、.

// Chinese: "红、绿、蓝"

Arabisch verwendet ein anderes Komma-Zeichen، und wird von rechts nach links gelesen.

// Arabic: "أحمر، أخضر، أزرق"

Diese Unterschiede werden in Intl.ListFormat automatisch berücksichtigt. Sie müssen die Interpunktionsregeln für jede Sprache nicht kennen.

Das Problem mit join()

Die Array.prototype.join()-Methode konvertiert Arrays in Zeichenketten unter Verwendung eines von Ihnen angegebenen Trennzeichens.

const colors = ["red", "green", "blue"];
console.log(colors.join(", "));
// "red, green, blue"

Dies kodiert englische Interpunktion fest. Das Komma- und Leerzeichen-Trennzeichen funktioniert nicht für andere Sprachen.

const colors = ["赤", "緑", "青"];
console.log(colors.join(", "));
// "赤, 緑, 青" (wrong - should use 、 instead of ,)

Sie können Trennzeichen nicht manuell basierend auf dem Gebietsschema wechseln, da Sie eine Zuordnung jeder Sprache zu ihren Interpunktionsregeln pflegen müssten. Diese Zuordnung wäre unvollständig und schwer zu pflegen.

Verwendung von Intl.ListFormat für lokalisierungsbewusste Trennzeichen

Der Intl.ListFormat-Konstruktor erstellt einen Formatierer, der die korrekten Trennzeichen für jede Locale anwendet.

const formatter = new Intl.ListFormat("en");
const colors = ["red", "green", "blue"];
console.log(formatter.format(colors));
// "red, green, and blue"

Der Formatierer verwendet automatisch die richtige Interpunktion für die angegebene Locale. Sie übergeben den Locale-Code als erstes Argument.

const enFormatter = new Intl.ListFormat("en");
const jaFormatter = new Intl.ListFormat("ja");
const arFormatter = new Intl.ListFormat("ar");

const colors = ["red", "green", "blue"];

console.log(enFormatter.format(colors));
// "red, green, and blue"

console.log(jaFormatter.format(["赤", "緑", "青"]));
// "赤、緑、青"

console.log(arFormatter.format(["أحمر", "أخضر", "أزرق"]));
// "أحمر، أخضر، أزرق"

Der Browser stellt die Interpunktionsregeln bereit. Sie müssen keinen locale-spezifischen Code pflegen.

Wie sich Trennzeichen zwischen Sprachen unterscheiden

Der Formatierer wendet unterschiedliche Trennzeichen basierend auf der Locale an. Diese Beispiele zeigen, wie dasselbe Array unterschiedlich formatiert wird.

Englisch verwendet ein Komma, ein Leerzeichen und das Wort "and".

const formatter = new Intl.ListFormat("en");
console.log(formatter.format(["apple", "orange", "banana"]));
// "apple, orange, and banana"

Spanisch verwendet ein Komma, ein Leerzeichen und das Wort "y".

const formatter = new Intl.ListFormat("es");
console.log(formatter.format(["manzana", "naranja", "plátano"]));
// "manzana, naranja y plátano"

Französisch verwendet ein Komma, ein Leerzeichen und das Wort "et".

const formatter = new Intl.ListFormat("fr");
console.log(formatter.format(["pomme", "orange", "banane"]));
// "pomme, orange et banane"

Deutsch verwendet ein Komma, ein Leerzeichen und das Wort "und".

const formatter = new Intl.ListFormat("de");
console.log(formatter.format(["Apfel", "Orange", "Banane"]));
// "Apfel, Orange und Banane"

Japanisch verwendet das Aufzählungskomma 、 und das Zeichen 、.

const formatter = new Intl.ListFormat("ja");
console.log(formatter.format(["りんご", "オレンジ", "バナナ"]));
// "りんご、オレンジ、バナナ"

Chinesisch verwendet das Aufzählungskomma 、 und das Wort 和.

const formatter = new Intl.ListFormat("zh");
console.log(formatter.format(["苹果", "橙子", "香蕉"]));
// "苹果、橙子和香蕉"

Koreanisch verwendet ein Komma und die Partikel 및.

const formatter = new Intl.ListFormat("ko");
console.log(formatter.format(["사과", "오렌지", "바나나"]));
// "사과, 오렌지 및 바나나"

Der Formatierer behandelt all diese Unterschiede automatisch. Sie schreiben denselben Code für jede Sprache.

Verwendung der Locale des Benutzers

Sie können die bevorzugte Locale des Benutzers aus seinen Browsereinstellungen erkennen und diese zur Formatierung von Listen verwenden.

const userLocale = navigator.language;
const formatter = new Intl.ListFormat(userLocale);
const items = ["first", "second", "third"];
console.log(formatter.format(items));

Dies stellt sicher, dass die Liste Trennzeichen verwendet, die den Erwartungen der Benutzer entsprechen. Ein Benutzer mit französischen Browsereinstellungen sieht französische Interpunktion. Ein Benutzer mit japanischen Einstellungen sieht japanische Interpunktion.

Formatierung von Arrays ohne Konjunktionen

Das standardmäßige Intl.ListFormat-Verhalten fügt eine Konjunktion wie "und" vor dem letzten Element hinzu. Sie können dies deaktivieren, indem Sie den Typ "unit" verwenden.

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

Der Typ "unit" verwendet nur Trennzeichen, ohne verbindende Wörter hinzuzufügen. Dies ist nützlich für technische Listen, Messungen oder Daten, bei denen Konjunktionen nicht angemessen sind.

const enFormatter = new Intl.ListFormat("en", { type: "unit" });
const jaFormatter = new Intl.ListFormat("ja", { type: "unit" });

console.log(enFormatter.format(["Item A", "Item B", "Item C"]));
// "Item A, Item B, Item C"

console.log(jaFormatter.format(["項目A", "項目B", "項目C"]));
// "項目A、項目B、項目C"

Auch ohne Konjunktionen folgt die Trennzeichen-Interpunktion weiterhin den Locale-Regeln.

Erstellen wiederverwendbarer Formatter

Sie können einen Formatter einmal erstellen und ihn für mehrere Arrays wiederverwenden. Dies ist effizienter, als für jedes Array einen neuen Formatter zu erstellen.

const formatter = new Intl.ListFormat("en");

console.log(formatter.format(["red", "green"]));
// "red and green"

console.log(formatter.format(["a", "b", "c", "d"]));
// "a, b, c, and d"

console.log(formatter.format(["one"]));
// "one"

Derselbe Formatter funktioniert für Arrays beliebiger Länge. Er wendet die korrekten Trennzeichen und Konjunktionen basierend auf der Anzahl der Elemente im Array an.

Umgang mit leeren Arrays

Wenn Sie ein leeres Array formatieren, gibt der Formatter einen leeren String zurück.

const formatter = new Intl.ListFormat("en");
console.log(formatter.format([]));
// ""

Sie sollten vor der Formatierung auf leere Arrays prüfen, wenn Sie ein anderes Verhalten benötigen.

function formatList(items, locale) {
  if (items.length === 0) {
    return "No items";
  }
  const formatter = new Intl.ListFormat(locale);
  return formatter.format(items);
}

console.log(formatList([], "en"));
// "No items"

console.log(formatList(["apple"], "en"));
// "apple"

Dies gibt Ihnen Kontrolle darüber, wie leere Arrays den Benutzern angezeigt werden.

Browser-Unterstützung

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

Sie können prüfen, ob die API existiert, 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 können Sie auf die join()-Methode zurückgreifen. Diese bietet eine grundlegende Formatierung ohne locale-spezifische Trennzeichen.

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" (or "red, green, blue" in older browsers)

Dies stellt sicher, dass Ihr Code in allen Browsern funktioniert und gleichzeitig die beste Erfahrung in modernen Browsern bietet.