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

Einführung

Wenn Sie eine Sprachauswahl erstellen oder eine Liste verfügbarer Sprachen anzeigen, müssen Sie jeden Sprachennamen 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.

Das Hardcodieren dieser Übersetzungen skaliert nicht. Sie müssten Übersetzungen jedes Sprachennamens in jede andere Sprache pflegen. Die Intl.DisplayNames-API löst dieses Problem, indem sie standardisierte, gebietsschemabewusste Namen für Sprachen, Länder, Schriften und Währungen bereitstellt.

Das Problem mit hardcodierten Sprachennamen

Sie können eine Sprachauswahl erstellen, indem Sie Sprachennamen 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, achtet auf japanische Zeichen, nicht auf das 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"
  }
  // ... more languages
};

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

Verwendung von Intl.DisplayNames zum Abrufen von Sprachennamen

Der Intl.DisplayNames-Konstruktor erstellt einen Formatter, 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-Identifikatoren. Das zweite Argument ist ein Optionsobjekt, bei dem type: "language" dem Formatter mitteilt, dass Sie Sprachennamen möchten. Die of()-Methode nimmt einen Sprachcode entgegen und gibt dessen 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 Formatter gibt den Sprachnamen in seinem Anzeigegebietsschema zurück. Dies übernimmt die gesamte Komplexität der Verwaltung von Sprachnamenübersetzungen.

Anzeige von Sprachnamen in ihrer nativen Form

Die Best Practice für Sprachauswahlen besteht darin, jede Sprache in ihrer eigenen Schrift anzuzeigen. Benutzer erkennen ihre Sprache schneller, wenn sie in vertrauten Zeichen geschrieben sehen.

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 Formatter, der die Zielsprache als Anzeigegebietsschema verwendet.

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 Formatter gibt den Namen in der Schrift und Form zurück, die Muttersprachler verwenden.

Verstehen von Sprachcode-Formaten

Die of()-Methode akzeptiert Sprachcodes in mehreren Formaten. Sie können grundlegende Sprachcodes wie "en" oder vollständige Gebietsschema-Identifikatoren 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 Formatter erkennt sowohl kurze Codes als auch erweiterte Identifikatoren mit Regions- oder Schrift-Subtags. Dies ermöglicht es Ihnen, zwischen Sprachvarianten zu unterscheiden.

Steuerung der Anzeige von Sprachnamen

Die languageDisplay-Option steuert den Detailgrad der zurückgegebenen Namen. Sie akzeptiert zwei Werte.

Der "standard"-Wert 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 "dialect"-Wert 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 Sprachauswahlen hilft das Standardformat Benutzern, die richtige Variante auszuwählen, wenn mehrere Dialekte verfügbar sind.

Lokalisierte Sprachnamen für die Benutzeroberfläche abrufen

Wenn Sie eine Einstellungsseite oder einen Sprachselektor erstellen, müssen Sie Sprachnamen in der aktuellen Oberflächensprache des Benutzers anzeigen. Erstellen Sie einen Formatter mit dem Gebietsschema des Benutzers.

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

// User interface is in English
console.log(getLocalizedLanguageName("ja", "en"));
// "Japanese"

// User interface is in French
console.log(getLocalizedLanguageName("ja", "fr"));
// "japonais"

// User interface is in Spanish
console.log(getLocalizedLanguageName("ja", "es"));
// "japonés"

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

Einen Sprachselektor mit nativen Namen erstellen

Ein häufiger Anwendungsfall ist die Erstellung eines Dropdowns oder einer Liste, in der Benutzer ihre bevorzugte Sprache auswählen. 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 Sprachselektor 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, in dem jede Sprache in ihrer nativen Schrift erscheint, sodass Benutzer ihre Sprache leicht identifizieren können.

Hybride Sprachlabels erstellen

Einige Oberflächen zeigen sowohl den nativen Namen als auch eine Übersetzung in der Sprache des Benutzers. Dies hilft Benutzern, die möglicherweise nicht alle Schriften erkennen, und macht die Oberflä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})`;
}

// User interface is in English
console.log(createHybridLabel("ja", "en"));
// "日本語 (Japanese)"

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

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

// User interface is in Spanish
console.log(createHybridLabel("ja", "es"));
// "日本語 (japonés)"

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

Fallback-Gebietsschemata handhaben

Der Intl.DisplayNames-Konstruktor akzeptiert ein Array von Gebietsschemata. Wenn das erste Gebietsschema nicht verfügbar ist, greift der Formatter auf das nächste Gebietsschema im Array zurück.

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

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

Sie können überprüfen, welches Gebietsschema der Formatter tatsächlich verwendet, mit der Methode resolvedOptions().

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

Dies zeigt, dass der Formatter nach dem Fallback auf Englisch aufgelöst wurde.

Wie verschiedene Gebietsschemata Sprachnamen formatieren

Jedes Gebietsschema hat seine eigenen Konventionen für Sprachnamen. Der Formatter 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 Formatter behandelt Großschreibung, Schrift und linguistische Konventionen für jede Sprache automatisch.

Browser-Unterstützung

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

Sie können überprü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 for older browsers
  const fallbackNames = {
    en: "English",
    es: "español",
    fr: "français",
    de: "Deutsch",
    ja: "日本語"
  };

  return fallbackNames[code] || code;
}

console.log(getLanguageName("es", "en"));
// "español" (or "Spanish" if you adjust the fallback for localization)

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