Wie zeige ich Sprachnamen wie English, Español, 日本語 an?

Einführung

Wenn Sie einen Sprachauswähler erstellen oder eine Liste verfügbarer Sprachen anzeigen, müssen Sie jeden Sprachnamen so darstellen, dass Benutzer ihn erkennen können. Ein französischsprachiger Benutzer sucht nach "Français", ein spanischsprachiger Benutzer nach "Español" und ein japanischsprachiger Benutzer nach "日本語". Benutzer identifizieren ihre Sprache anhand ihrer nativen Schrift und Schreibweise.

Die Hardcodierung dieser Übersetzungen ist nicht skalierbar. Sie müssten Übersetzungen jedes Sprachnamens in jede andere Sprache pflegen. Die Intl.DisplayNames-API löst dieses Problem, indem sie standardisierte, gebietsschemaabhängige Namen für Sprachen, Länder, Schriften und Währungen bereitstellt.

Das Problem mit hardcodierten Sprachnamen

Sie können einen Sprachauswähler erstellen, indem Sie Sprachnamen in einem Objekt hardcodieren.

const languageNames = {
  en: "English",
  es: "Spanish",
  fr: "French",
  de: "German",
  ja: "Japanese"
};

console.log(languageNames.en);
// "English"

Dieser Ansatz hat drei Probleme. Erstens funktionieren diese Namen nur für englischsprachige Benutzer. Zweitens können Benutzer ihre Sprache nicht erkennen, wenn sie auf Englisch erscheint. Ein japanischer Benutzer, der nach seiner Sprache sucht, hält Ausschau nach japanischen Zeichen, nicht nach dem Wort "Japanese". Drittens müssen Sie manuell Übersetzungen für jede Sprache in jede andere Sprache pflegen.

const languageNames = {
  en: {
    en: "English",
    es: "Spanish",
    fr: "French",
    de: "German",
    ja: "Japanese"
  },
  es: {
    en: "Inglés",
    es: "Español",
    fr: "Francés",
    de: "Alemán",
    ja: "Japonés"
  }
  // ... weitere Sprachen
};

Dies wird schnell unwartbar. Sie benötigen eine bessere Lösung.

Verwendung von Intl.DisplayNames zur Anzeige von Sprachnamen

Der Intl.DisplayNames-Konstruktor erstellt einen Formatierer, der Sprachcodes in menschenlesbare Namen umwandelt. Sie geben ein Gebietsschema und den Typ der Namen an, die Sie anzeigen möchten.

const names = new Intl.DisplayNames(["en"], { type: "language" });
console.log(names.of("en"));
// "English"

Das erste Argument ist ein Array von Gebietsschema-Kennungen. Das zweite Argument ist ein Options-Objekt, wobei type: "language" dem Formatierer mitteilt, dass Sie Sprachnamen wünschen. Die of()-Methode nimmt einen Sprachcode und gibt seinen Namen zurück.

Sie können Namen in jeder Sprache erhalten, indem Sie das Gebietsschema ändern.

const enNames = new Intl.DisplayNames(["en"], { type: "language" });
const esNames = new Intl.DisplayNames(["es"], { type: "language" });
const frNames = new Intl.DisplayNames(["fr"], { type: "language" });

console.log(enNames.of("es"));
// "Spanish"

console.log(esNames.of("es"));
// "español"

console.log(frNames.of("es"));
// "espagnol"

Jeder Formatierer gibt den Sprachnamen in seinem Anzeigegebietsschema zurück. Dies bewältigt die gesamte Komplexität der Pflege von Sprachnamenübersetzungen.

Anzeigen von Sprachnamen in ihrer nativen Form

Die beste Praxis für Sprachauswahlelemente ist es, jede Sprache in ihrer eigenen Schrift anzuzeigen. Benutzer erkennen ihre Sprache schneller, wenn sie in vertrauten Zeichen geschrieben ist.

const names = new Intl.DisplayNames(["ja"], { type: "language" });
console.log(names.of("ja"));
// "日本語"

Um den nativen Namen für jede Sprache zu erhalten, erstellen Sie einen Formatierer mit der Zielsprache als Anzeigesprache.

function getNativeName(languageCode) {
  const names = new Intl.DisplayNames([languageCode], { type: "language" });
  return names.of(languageCode);
}

console.log(getNativeName("en"));
// "English"

console.log(getNativeName("es"));
// "español"

console.log(getNativeName("fr"));
// "français"

console.log(getNativeName("de"));
// "Deutsch"

console.log(getNativeName("ja"));
// "日本語"

console.log(getNativeName("ar"));
// "العربية"

console.log(getNativeName("zh"));
// "中文"

Dieses Muster funktioniert für jeden Sprachcode. Der Formatierer gibt den Namen in der Schrift und Form zurück, die Muttersprachler verwenden.

Verstehen von Sprachcode-Formaten

Die Methode of() akzeptiert Sprachcodes in verschiedenen Formaten. Sie können grundlegende Sprachcodes wie "en" oder vollständige Gebietsschema-Kennungen wie "en-US" verwenden.

const names = new Intl.DisplayNames(["en"], { type: "language" });

console.log(names.of("en"));
// "English"

console.log(names.of("en-US"));
// "American English"

console.log(names.of("en-GB"));
// "British English"

console.log(names.of("zh"));
// "Chinese"

console.log(names.of("zh-Hans"));
// "Simplified Chinese"

console.log(names.of("zh-Hant"));
// "Traditional Chinese"

Der Formatierer erkennt sowohl Kurzcodes als auch erweiterte Kennungen mit Regions- oder Skript-Subtags. Dies ermöglicht es Ihnen, zwischen Sprachvarianten zu unterscheiden.

Steuern der Darstellung von Sprachnamen

Die Option languageDisplay steuert den Detaillierungsgrad in den zurückgegebenen Namen. Sie akzeptiert zwei Werte.

Der Wert "standard" gibt vollständige Namen zurück, die Dialektinformationen enthalten. Dies ist die Standardeinstellung.

const names = new Intl.DisplayNames(["en"], {
  type: "language",
  languageDisplay: "standard"
});

console.log(names.of("en-US"));
// "American English"

console.log(names.of("en-GB"));
// "British English"

console.log(names.of("pt-BR"));
// "Brazilian Portuguese"

console.log(names.of("pt-PT"));
// "European Portuguese"

Der Wert "dialect" gibt ebenfalls vollständige Namen mit Dialektinformationen zurück. In den meisten Fällen erzeugt er die gleiche Ausgabe wie "standard".

const names = new Intl.DisplayNames(["en"], {
  type: "language",
  languageDisplay: "dialect"
});

console.log(names.of("en-US"));
// "American English"

console.log(names.of("pt-BR"));
// "Brazilian Portuguese"

Für Sprachauswahlelemente hilft das Standardformat den Benutzern, die richtige Variante zu wählen, wenn mehrere Dialekte verfügbar sind.

Lokalisierte Sprachnamen für die Benutzeroberfläche abrufen

Wenn Sie eine Einstellungsseite oder einen Sprachauswähler erstellen, müssen Sie Sprachnamen in der aktuellen Schnittstellensprache des Benutzers anzeigen. Erstellen Sie einen Formatierer mit dem Gebietsschema des Benutzers.

function getLocalizedLanguageName(languageCode, userLocale) {
  const names = new Intl.DisplayNames([userLocale], { type: "language" });
  return names.of(languageCode);
}

// Benutzeroberfläche ist auf Englisch
console.log(getLocalizedLanguageName("ja", "en"));
// "Japanese"

// Benutzeroberfläche ist auf Französisch
console.log(getLocalizedLanguageName("ja", "fr"));
// "japonais"

// Benutzeroberfläche ist auf Spanisch
console.log(getLocalizedLanguageName("ja", "es"));
// "japonés"

Dieser Ansatz zeigt beschreibende Namen in der Sprache an, die der Benutzer versteht. Kombinieren Sie dies mit nativen Namen, um hybride Bezeichnungen wie "日本語 (Japanisch)" zu erstellen, die sowohl für Muttersprachler als auch für andere funktionieren.

Erstellung eines Sprachauswählers mit nativen Namen

Ein häufiger Anwendungsfall ist die Erstellung eines Dropdown-Menüs oder einer Liste, in der Benutzer ihre bevorzugte Sprache auswählen können. Zeigen Sie jede Sprache in ihrer nativen Form an, damit Benutzer ihre Option schnell finden können.

const supportedLanguages = ["en", "es", "fr", "de", "ja", "ar", "zh"];

function createLanguageOptions() {
  return supportedLanguages.map((code) => {
    const names = new Intl.DisplayNames([code], { type: "language" });
    const nativeName = names.of(code);
    return { code, name: nativeName };
  });
}

const options = createLanguageOptions();
console.log(options);

Dies erzeugt ein Array von Sprachoptionen mit nativen Namen.

[
  { code: "en", name: "English" },
  { code: "es", name: "español" },
  { code: "fr", name: "français" },
  { code: "de", name: "Deutsch" },
  { code: "ja", name: "日本語" },
  { code: "ar", name: "العربية" },
  { code: "zh", name: "中文" }
]

Sie können diese Optionen in HTML rendern, um einen Sprachauswähler zu erstellen.

function renderLanguageSelector() {
  const options = createLanguageOptions();
  const select = document.createElement("select");
  select.id = "language-selector";

  options.forEach((option) => {
    const optionElement = document.createElement("option");
    optionElement.value = option.code;
    optionElement.textContent = option.name;
    select.appendChild(optionElement);
  });

  return select;
}

const selector = renderLanguageSelector();
document.body.appendChild(selector);

Dies erstellt ein Dropdown-Menü, in dem jede Sprache in ihrer nativen Schrift erscheint, was es Benutzern erleichtert, ihre Sprache zu identifizieren.

Erstellen von hybriden Sprachbezeichnungen

Einige Benutzeroberflächen zeigen sowohl den nativen Namen als auch eine Übersetzung in der Sprache des Benutzers an. Dies hilft Benutzern, die möglicherweise nicht alle Schriften erkennen, und macht die Benutzeroberfläche zugänglicher.

function createHybridLabel(languageCode, userLocale) {
  const nativeNames = new Intl.DisplayNames([languageCode], {
    type: "language"
  });
  const localizedNames = new Intl.DisplayNames([userLocale], {
    type: "language"
  });

  const nativeName = nativeNames.of(languageCode);
  const localizedName = localizedNames.of(languageCode);

  if (nativeName === localizedName) {
    return nativeName;
  }

  return `${nativeName} (${localizedName})`;
}

// Benutzeroberfläche ist auf Englisch
console.log(createHybridLabel("ja", "en"));
// "日本語 (Japanese)"

console.log(createHybridLabel("ar", "en"));
// "العربية (Arabic)"

console.log(createHybridLabel("en", "en"));
// "English"

// Benutzeroberfläche ist auf Spanisch
console.log(createHybridLabel("ja", "es"));
// "日本語 (japonés)"

Dieses Muster kombiniert die Erkennungsvorteile nativer Namen mit der Klarheit lokalisierter Übersetzungen.

Umgang mit Fallback-Locales

Der Konstruktor Intl.DisplayNames akzeptiert ein Array von Locales. Wenn die erste Locale nicht verfügbar ist, greift der Formatierer auf die nächste Locale im Array zurück.

const names = new Intl.DisplayNames(["xx-XX", "en"], { type: "language" });
console.log(names.of("fr"));
// "French"

Der Formatierer versucht zuerst "xx-XX", das nicht existiert, und greift dann auf "en" zurück. Dies stellt sicher, dass Ihr Code auch dann funktioniert, wenn die angeforderte Locale nicht verfügbar ist.

Sie können mit der Methode resolvedOptions() überprüfen, welche Locale der Formatierer tatsächlich verwendet.

const names = new Intl.DisplayNames(["xx-XX", "en"], { type: "language" });
console.log(names.resolvedOptions().locale);
// "en"

Dies zeigt, dass der Formatierer nach dem Fallback auf Englisch zurückgegriffen hat.

Wie verschiedene Locales Sprachnamen formatieren

Jede Locale hat ihre eigenen Konventionen für Sprachnamen. Der Formatierer wendet diese automatisch an.

const supportedLanguages = ["en", "es", "fr", "de", "ja"];

function showLanguageNamesInLocale(locale) {
  const names = new Intl.DisplayNames([locale], { type: "language" });
  return supportedLanguages.map((code) => ({
    code,
    name: names.of(code)
  }));
}

console.log(showLanguageNamesInLocale("en"));
// [
//   { code: "en", name: "English" },
//   { code: "es", name: "Spanish" },
//   { code: "fr", name: "French" },
//   { code: "de", name: "German" },
//   { code: "ja", name: "Japanese" }
// ]

console.log(showLanguageNamesInLocale("es"));
// [
//   { code: "en", name: "inglés" },
//   { code: "es", name: "español" },
//   { code: "fr", name: "francés" },
//   { code: "de", name: "alemán" },
//   { code: "ja", name: "japonés" }
// ]

console.log(showLanguageNamesInLocale("ja"));
// [
//   { code: "en", name: "英語" },
//   { code: "es", name: "スペイン語" },
//   { code: "fr", name: "フランス語" },
//   { code: "de", name: "ドイツ語" },
//   { code: "ja", name: "日本語" }
// ]

Der Formatierer behandelt automatisch die Großschreibung, Schrift und sprachlichen Konventionen für jede Sprache.

Browser-Unterstützung

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

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

if (typeof Intl.DisplayNames !== "undefined") {
  const names = new Intl.DisplayNames(["en"], { type: "language" });
  console.log(names.of("fr"));
} else {
  console.log("Intl.DisplayNames is not supported");
}

Für ältere Browser müssen Sie einen Fallback bereitstellen oder ein Polyfill verwenden. Ein einfacher Fallback verwendet eine fest codierte Zuordnung von Sprachcodes zu Namen.

function getLanguageName(code, locale) {
  if (typeof Intl.DisplayNames !== "undefined") {
    const names = new Intl.DisplayNames([locale], { type: "language" });
    return names.of(code);
  }

  // Fallback für ältere Browser
  const fallbackNames = {
    en: "English",
    es: "español",
    fr: "français",
    de: "Deutsch",
    ja: "日本語"
  };

  return fallbackNames[code] || code;
}

console.log(getLanguageName("es", "en"));
// "español" (oder "Spanish", wenn Sie den Fallback für die Lokalisierung anpassen)

Dies stellt sicher, dass Ihr Code auch in Browsern ohne Unterstützung für Intl.DisplayNames funktioniert, obwohl Sie die automatischen Lokalisierungsfunktionen verlieren.