Wie formatiere ich Arrays mit lokalitätsspezifischen Trennzeichen in JavaScript?

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

Einführung

Wenn Sie ein Array in eine lesbare Zeichenfolge 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 Wortstellung.

Die Intl.ListFormat-API konvertiert Arrays in Zeichenketten mit sprachspezifischen 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 verwenden, um Listenelemente zu trennen. Das ist nicht richtig.

Englisch trennt Elemente mit einem Komma und Leerzeichen.

// Englisch: "red, green, blue"

Japanisch verwendet das Aufzählungskomma 、 ohne Leerzeichen.

// Japanisch: "赤、緑、青"

Chinesisch verwendet dasselbe Aufzählungskomma 、 Zeichen.

// Chinesisch: "红、绿、蓝"

Arabisch verwendet ein anderes Kommazeichen، und wird von rechts nach links gelesen.

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

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

Das Problem mit join()

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

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

Dies codiert die englische Interpunktion fest. Das Komma und Leerzeichen als Trennzeichen funktioniert nicht für andere Sprachen.

const colors = ["赤", "緑", "青"];
console.log(colors.join(", "));
// "赤, 緑, 青" (falsch - sollte 、 anstelle von , verwenden)

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 Konstruktor Intl.ListFormat 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 Zeichensetzung für die angegebene Locale. Die Locale-Kennung wird als erstes Argument übergeben.

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. Es ist nicht notwendig, lokalitätsspezifischen Code zu pflegen.

Wie sich Trennzeichen zwischen Sprachen unterscheiden

Der Formatierer wendet je nach Locale unterschiedliche Trennzeichen 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. Man schreibt denselben Code für jede Sprache.

Verwendung der Benutzersprache

Sie können die bevorzugte Sprache des Benutzers aus den 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 des Benutzers entsprechen. Ein Benutzer mit französischen Browsereinstellungen sieht französische Zeichensetzung. Ein Benutzer mit japanischen Einstellungen sieht japanische Zeichensetzung.

Formatierung von Arrays ohne Konjunktionen

Das Standardverhalten von Intl.ListFormat fügt vor dem letzten Element eine Konjunktion wie "und" hinzu. Sie können dies deaktivieren, indem Sie den Einheitstyp 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 Einheitstyp verwendet nur Trennzeichen ohne Verbindungswö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 Zeichensetzung der Trennzeichen den Regeln der jeweiligen Sprache.

Erstellung wiederverwendbarer Formatierer

Sie können einen Formatierer einmal erstellen und für mehrere Arrays wiederverwenden. Dies ist effizienter als für jedes Array einen neuen Formatierer 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 Formatierer funktioniert für Arrays jeder 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 Formatierer eine leere Zeichenfolge 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 die Kontrolle darüber, wie leere Arrays für Benutzer dargestellt 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 lokalitätsspezifische 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" (oder "red, green, blue" in älteren Browsern)

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