Wie zeige ich Ländernamen in verschiedenen Sprachen an?

Einführung

Wenn Sie ein Versandformular, eine Benutzerprofilseite oder eine Adressauswahl erstellen, müssen Sie Ländernamen anzeigen. Benutzer sehen "France" auf Englisch, "Francia" auf Spanisch, "Frankreich" auf Deutsch und "フランス" auf Japanisch. Jeder Benutzer erwartet, dass Ländernamen in seiner eigenen Sprache angezeigt werden.

Ihre Anwendung speichert Ländercodes wie FR, US oder JP in Datenbanken und APIs. Diese standardisierten Codes funktionieren in allen Systemen, aber Benutzer benötigen menschenlesbare Namen. Die Intl.DisplayNames API konvertiert Ländercodes in lokalisierte Ländernamen in jeder Sprache, ohne Übersetzungstabellen zu pflegen oder von externen Bibliotheken abhängig zu sein.

Ländercodes verstehen

Länder werden durch zweistellige Codes identifiziert, die im ISO 3166-1 alpha-2 Standard definiert sind. Jedes Land erhält einen eindeutigen Code, der in allen Sprachen und Systemen konstant bleibt.

// Häufige Ländercodes
// US = United States
// GB = Great Britain (United Kingdom)
// FR = France
// DE = Germany (Deutschland)
// JP = Japan
// CN = China
// BR = Brazil
// IN = India

Diese Codes erscheinen in Formularen, URLs, Datenbanken und APIs. Der Code US bedeutet immer Vereinigte Staaten, unabhängig davon, ob Ihre Anwendung auf Englisch, Spanisch, Japanisch oder einer anderen Sprache läuft. Der Code bietet eine stabile Kennung, während der Anzeigename basierend auf der Sprache des Benutzers wechselt.

Verwendung von Intl.DisplayNames zur Anzeige von Ländernamen

Der Intl.DisplayNames Konstruktor erstellt einen Formatierer, der Ländercodes in Ländernamen umwandelt. Sie geben eine Locale an und setzen den Typ auf "region", um Ländernamen zu erhalten.

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

console.log(countryNames.of("US"));
// "United States"

console.log(countryNames.of("FR"));
// "France"

console.log(countryNames.of("JP"));
// "Japan"

Das erste Argument ist ein Array von Locale-Kennungen. Die Option type: "region" teilt dem Formatierer mit, dass Sie Länder- oder Regionsnamen wünschen. Die Methode of() nimmt einen Ländercode und gibt seinen lokalisierten Namen zurück.

Der Begriff "Region" umfasst Länder, Territorien und geografische Gebiete. Dies schließt unabhängige Länder wie Frankreich, Territorien wie Puerto Rico und spezielle Regionen wie die Europäische Union ein.

Anzeigen von Ländernamen in verschiedenen Sprachen

Derselbe Ländercode erzeugt unterschiedliche Namen in verschiedenen Sprachen. Erstellen Sie Formatierer für verschiedene Locales, um zu sehen, wie sich Ländernamen ändern.

const englishNames = new Intl.DisplayNames(["en"], { type: "region" });
const spanishNames = new Intl.DisplayNames(["es"], { type: "region" });
const germanNames = new Intl.DisplayNames(["de"], { type: "region" });
const japaneseNames = new Intl.DisplayNames(["ja"], { type: "region" });

console.log(englishNames.of("FR"));
// "France"

console.log(spanishNames.of("FR"));
// "Francia"

console.log(germanNames.of("FR"));
// "Frankreich"

console.log(japaneseNames.of("FR"));
// "フランス"

Jeder Formatierer gibt den Ländernamen in seiner Anzeigesprache zurück. Dies bewältigt die gesamte Komplexität der Verwaltung von Ländernamenübersetzungen in verschiedenen Sprachen.

Sie können eine Funktion erstellen, die Ländernamen in jeder Sprache abruft.

function getCountryName(countryCode, locale) {
  const names = new Intl.DisplayNames([locale], { type: "region" });
  return names.of(countryCode);
}

console.log(getCountryName("US", "en"));
// "United States"

console.log(getCountryName("US", "fr"));
// "États-Unis"

console.log(getCountryName("US", "ar"));
// "الولايات المتحدة"

console.log(getCountryName("DE", "en"));
// "Germany"

console.log(getCountryName("DE", "de"));
// "Deutschland"

console.log(getCountryName("DE", "es"));
// "Alemania"

Diese Funktion funktioniert für jede Kombination aus Ländercode und Locale. Der Browser stellt die Übersetzungen automatisch bereit.

Erstellen eines Länderauswahlmenüs

Ein häufiger Anwendungsfall ist die Erstellung eines Dropdown-Menüs, in dem Benutzer ihr Land auswählen können. Die Ländernamen sollten in der Sprache des Benutzers erscheinen.

function createCountrySelector(locale) {
  const countryNames = new Intl.DisplayNames([locale], { type: "region" });

  const countries = [
    "US", "GB", "CA", "AU", "FR", "DE", "ES", "IT",
    "JP", "CN", "KR", "IN", "BR", "MX", "AR", "RU"
  ];

  const select = document.createElement("select");
  select.id = "country";
  select.name = "country";

  const placeholder = document.createElement("option");
  placeholder.value = "";
  placeholder.textContent = "Select a country";
  select.appendChild(placeholder);

  countries.forEach((code) => {
    const option = document.createElement("option");
    option.value = code;
    option.textContent = countryNames.of(code);
    select.appendChild(option);
  });

  return select;
}

const selector = createCountrySelector("en");
document.body.appendChild(selector);

Dies erstellt ein Dropdown-Menü mit Ländernamen auf Englisch. Ändern Sie das Locale auf "es" und dieselbe Funktion erzeugt ein Dropdown-Menü mit spanischen Ländernamen. Ändern Sie es auf "ja" und die Namen erscheinen auf Japanisch.

Sie können das Auswahlmenü so gestalten, dass es auf die Browsersprache des Benutzers reagiert.

function createLocalizedCountrySelector() {
  const userLocale = navigator.language;
  return createCountrySelector(userLocale);
}

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

Das Auswahlmenü zeigt automatisch Ländernamen in der bevorzugten Sprache des Benutzers basierend auf seinen Browsereinstellungen an.

Abrufen aller verfügbaren Länder

Die Methode Intl.supportedValuesOf() gibt ein Array mit allen unterstützten Ländercodes zurück. Dies macht die Pflege einer hartcodierten Liste überflüssig.

const allCountries = Intl.supportedValuesOf("region");

console.log(allCountries.length);
// 249 (ungefähre Anzahl ab 2025)

console.log(allCountries.slice(0, 10));
// ["AC", "AD", "AE", "AF", "AG", "AI", "AL", "AM", "AO", "AQ"]

Die Methode gibt Codes in alphabetischer Reihenfolge nach Code zurück, nicht nach Ländernamen. Sie müssen nach lokalisierten Namen sortieren, wenn Sie eine alphabetische Reihenfolge in einer bestimmten Sprache wünschen.

function getSortedCountries(locale) {
  const countryNames = new Intl.DisplayNames([locale], { type: "region" });
  const allCountries = Intl.supportedValuesOf("region");

  return allCountries
    .map((code) => ({
      code,
      name: countryNames.of(code)
    }))
    .sort((a, b) => a.name.localeCompare(b.name, locale));
}

const sortedEnglish = getSortedCountries("en");
console.log(sortedEnglish.slice(0, 5));
// [
//   { code: "AF", name: "Afghanistan" },
//   { code: "AX", name: "Åland Islands" },
//   { code: "AL", name: "Albania" },
//   { code: "DZ", name: "Algeria" },
//   { code: "AS", name: "American Samoa" }
// ]

const sortedSpanish = getSortedCountries("es");
console.log(sortedSpanish.slice(0, 5));
// [
//   { code: "AF", name: "Afganistán" },
//   { code: "AL", name: "Albania" },
//   { code: "DE", name: "Alemania" },
//   { code: "AD", name: "Andorra" },
//   { code: "AO", name: "Angola" }
// ]

Die Sortierreihenfolge unterscheidet sich zwischen den Sprachen, da Ländernamen in verschiedenen Alphabeten und Kollationsregeln unterschiedlich sortiert werden.

Erstellen eines umfassenden Länderselektors

Kombinieren Sie Intl.supportedValuesOf() mit Intl.DisplayNames, um einen Selektor mit allen verfügbaren Ländern zu erstellen.

function createComprehensiveCountrySelector(locale) {
  const countryNames = new Intl.DisplayNames([locale], { type: "region" });
  const allCountries = Intl.supportedValuesOf("region");

  const sortedCountries = allCountries
    .map((code) => ({
      code,
      name: countryNames.of(code)
    }))
    .sort((a, b) => a.name.localeCompare(b.name, locale));

  const select = document.createElement("select");
  select.id = "country";
  select.name = "country";

  const placeholder = document.createElement("option");
  placeholder.value = "";
  placeholder.textContent = "Select a country";
  select.appendChild(placeholder);

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

  return select;
}

const selector = createComprehensiveCountrySelector("en");
document.body.appendChild(selector);

Dieser Selektor enthält alle 249 vom Browser unterstützten Länder und Territorien, alphabetisch sortiert in der Sprache des Benutzers.

Umgang mit ungültigen Ländercodes

Nicht alle zweistelligen Zeichenfolgen sind gültige Ländercodes. Die Methode of() behandelt ungültige Codes basierend auf der Option fallback.

const withCodeFallback = new Intl.DisplayNames(["en"], {
  type: "region",
  fallback: "code"
});

const withNoneFallback = new Intl.DisplayNames(["en"], {
  type: "region",
  fallback: "none"
});

console.log(withCodeFallback.of("US"));
// "United States"

console.log(withCodeFallback.of("XX"));
// "XX"

console.log(withNoneFallback.of("US"));
// "United States"

console.log(withNoneFallback.of("XX"));
// undefined

Die Option fallback: "code" gibt den Eingabecode zurück, wenn kein Land existiert. Die Option fallback: "none" gibt undefined für ungültige Codes zurück.

Verwenden Sie fallback: "none", wenn Sie ungültige Codes erkennen und explizit behandeln müssen.

function getValidatedCountryName(code, locale) {
  const names = new Intl.DisplayNames([locale], {
    type: "region",
    fallback: "none"
  });

  const name = names.of(code);

  if (name === undefined) {
    return "Unknown country";
  }

  return name;
}

console.log(getValidatedCountryName("US", "en"));
// "United States"

console.log(getValidatedCountryName("INVALID", "en"));
// "Unknown country"

Dieses Muster hilft Ihnen, Benutzereingaben oder Daten aus externen Quellen zu validieren.

Steuerung der Ländernamenlänge mit style

Die Option style steuert, wie Ländernamen erscheinen. Drei Werte erzeugen unterschiedliche Ausgabelängen.

const longNames = new Intl.DisplayNames(["en"], {
  type: "region",
  style: "long"
});

const shortNames = new Intl.DisplayNames(["en"], {
  type: "region",
  style: "short"
});

const narrowNames = new Intl.DisplayNames(["en"], {
  type: "region",
  style: "narrow"
});

console.log(longNames.of("US"));
// "United States"

console.log(shortNames.of("US"));
// "US"

console.log(narrowNames.of("US"));
// "US"

Der Stil long ist die Standardeinstellung und erzeugt vollständige Ländernamen. Die Stile short und narrow geben abgekürzte Formen zurück, wenn verfügbar. Für die meisten Länder geben die Stile short und narrow den Ländercode selbst zurück.

Einige Länder haben unterschiedliche Kurzformen.

const longNames = new Intl.DisplayNames(["en"], {
  type: "region",
  style: "long"
});

const shortNames = new Intl.DisplayNames(["en"], {
  type: "region",
  style: "short"
});

console.log(longNames.of("GB"));
// "United Kingdom"

console.log(shortNames.of("GB"));
// "UK"

console.log(longNames.of("BO"));
// "Bolivia"

console.log(shortNames.of("BO"));
// "Bolivia"

Verwenden Sie den Standard-Stil long für die meisten Benutzeroberflächen. Verwenden Sie short oder narrow, wenn der Platz begrenzt ist, wie bei mobiler Navigation oder kompakten Tabellen.

Anzeigen von Regionsnamen für Territorien

Der ISO 3166-1 Standard umfasst Territorien, Abhängigkeiten und spezielle Gebiete über unabhängige Länder hinaus. Die Intl.DisplayNames API behandelt diese ebenfalls.

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

console.log(regionNames.of("PR"));
// "Puerto Rico"

console.log(regionNames.of("GU"));
// "Guam"

console.log(regionNames.of("HK"));
// "Hong Kong"

console.log(regionNames.of("MQ"));
// "Martinique"

console.log(regionNames.of("GF"));
// "French Guiana"

Diese Codes funktionieren auf die gleiche Weise wie Ländercodes. Ihre Anwendung kann sie einheitlich behandeln, während der Browser entsprechende lokalisierte Namen bereitstellt.

Verwendung numerischer Regionscodes

Der ISO 3166-1 Standard definiert auch numerische Codes. Die Intl.DisplayNames API akzeptiert UN M.49 numerische Regionscodes zusätzlich zu zweistelligen Codes.

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

console.log(regionNames.of("840"));
// "United States"

console.log(regionNames.of("250"));
// "France"

console.log(regionNames.of("392"));
// "Japan"

Numerische Codes repräsentieren auch größere geografische Regionen.

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

console.log(regionNames.of("150"));
// "Europe"

console.log(regionNames.of("019"));
// "Americas"

console.log(regionNames.of("142"));
// "Asia"

console.log(regionNames.of("002"));
// "Africa"

console.log(regionNames.of("009"));
// "Oceania"

Diese Codes funktionieren über verschiedene Sprachen hinweg.

const englishRegions = new Intl.DisplayNames(["en"], { type: "region" });
const spanishRegions = new Intl.DisplayNames(["es"], { type: "region" });

console.log(englishRegions.of("150"));
// "Europe"

console.log(spanishRegions.of("150"));
// "Europa"

Verwenden Sie numerische Codes, wenn Sie Zeichenkodierungsprobleme vermeiden oder mit Systemen arbeiten möchten, die UN M.49 Codes verwenden.

Caching von DisplayNames-Instanzen für bessere Performance

Das Erstellen von Intl.DisplayNames-Instanzen verursacht minimalen Overhead, aber Anwendungen, die viele Ländercodes konvertieren, können vom Caching der Formatierer profitieren.

const displayNamesCache = new Map();

function getDisplayNames(locale, type) {
  const key = `${locale}-${type}`;

  if (!displayNamesCache.has(key)) {
    displayNamesCache.set(
      key,
      new Intl.DisplayNames([locale], { type })
    );
  }

  return displayNamesCache.get(key);
}

function getCountryName(code, locale) {
  const formatter = getDisplayNames(locale, "region");
  return formatter.of(code);
}

console.log(getCountryName("US", "en"));
// "United States"

console.log(getCountryName("FR", "en"));
// "France"

console.log(getCountryName("US", "es"));
// "Estados Unidos"

Der Cache speichert Formatierer, die nach Locale und Typ indiziert sind. Nachfolgende Aufrufe verwenden bestehende Formatierer wieder, anstatt neue zu erstellen.

Diese Optimierung ist besonders wichtig beim Rendern großer Länderlisten oder bei der Verarbeitung hunderter Ländercodes in Tabellen oder Datenrastern.

Umgang mit Locale-Fallbacks

Der Konstruktor Intl.DisplayNames akzeptiert ein Array von Locales. Wenn die erste Locale nicht unterstützt wird, greift der Browser auf die nächste Locale im Array zurück.

const names = new Intl.DisplayNames(["xx-XX", "en"], { type: "region" });

console.log(names.of("US"));
// "United States"

Der Browser 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 überprüfen, welche Locale der Formatierer tatsächlich verwendet.

const names = new Intl.DisplayNames(["xx-XX", "en"], { type: "region" });

console.log(names.resolvedOptions().locale);
// "en"

Die Methode resolvedOptions() gibt die Locale zurück, auf die der Formatierer nach der Fallback-Verarbeitung zurückgegriffen hat.

Vergleich von Ländernamen in verschiedenen Sprachen

Verschiedene Sprachen formatieren Ländernamen unterschiedlich. Einige Sprachen schreiben Ländernamen groß, andere nicht. Einige Sprachen verwenden Artikel, andere nicht.

const english = new Intl.DisplayNames(["en"], { type: "region" });
const french = new Intl.DisplayNames(["fr"], { type: "region" });
const german = new Intl.DisplayNames(["de"], { type: "region" });

console.log(english.of("US"));
// "United States"

console.log(french.of("US"));
// "États-Unis"

console.log(german.of("US"));
// "Vereinigte Staaten"

console.log(english.of("NL"));
// "Netherlands"

console.log(french.of("NL"));
// "Pays-Bas"

console.log(german.of("NL"));
// "Niederlande"

Der Formatierer behandelt all diese sprachlichen Konventionen automatisch. Sie müssen die Grammatikregeln für jede Sprache nicht kennen.

Browser-Unterstützung

Die Intl.DisplayNames-API mit type: "region" ist in allen modernen Browsern verfügbar. Sie wird seit 2021 von allen wichtigen Browsern wie Chrome, Firefox, Safari und Edge unterstützt.

Moderne Anwendungen können diese API ohne Polyfills oder Fallbacks verwenden. Der Browser verwaltet die Ländernamen-Daten und hält sie aktuell, wenn sich Länder und Territorien ändern.

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: "region" });
  console.log(names.of("US"));
} else {
  console.log("Intl.DisplayNames is not supported");
}

Für Anwendungen, die ältere Browser unterstützen, stellen Sie einen Fallback mit einer statischen Nachschlagetabelle für Ländernamen bereit.

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

  const fallbackNames = {
    US: "United States",
    GB: "United Kingdom",
    FR: "France",
    DE: "Germany",
    JP: "Japan"
  };

  return fallbackNames[code] || code;
}

console.log(getCountryName("US", "en"));
// "United States"

Dies stellt sicher, dass Ihre Anwendung in allen Browsern funktioniert, obwohl ältere Browser die automatische Lokalisierungsfunktion verlieren.