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, Ländernamen in seiner eigenen Sprache zu sehen.

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

Ländercodes verstehen

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

// Common country codes
// 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 sich der Anzeigename basierend auf der Sprache des Benutzers ändert.

Verwendung von Intl.DisplayNames zum Abrufen von Ländernamen

Der Intl.DisplayNames-Konstruktor erstellt einen Formatierer, der Ländercodes in Ländernamen umwandelt. Sie geben ein Gebietsschema 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 Gebietsschema-Kennungen. Die type: "region"-Option teilt dem Formatierer mit, dass Sie Länder- oder Regionsnamen möchten. Die of()-Methode nimmt einen Ländercode entgegen und gibt dessen lokalisierten Namen zurück.

Der Begriff „Region" umfasst Länder, Territorien und geografische Gebiete. Dazu gehören unabhängige Länder wie Frankreich, Territorien wie Puerto Rico und Sonderregionen wie die Europäische Union.

Ländernamen in verschiedenen Sprachen anzeigen

Derselbe Ländercode erzeugt unterschiedliche Namen in verschiedenen Sprachen. Erstellen Sie Formatter 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 Formatter gibt den Ländernamen in seinem Anzeigelocale zurück. Dies übernimmt die gesamte Komplexität der Verwaltung von Ländernamenübersetzungen über Sprachen hinweg.

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.

Einen Länderauswähler erstellen

Ein häufiger Anwendungsfall ist die Erstellung eines Dropdowns, in dem Benutzer ihr Land auswählen. 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 mit Ländernamen auf Englisch. Ändern Sie das Locale auf "es" und dieselbe Funktion erzeugt ein Dropdown mit spanischen Ländernamen. Ändern Sie es auf "ja" und die Namen erscheinen auf Japanisch.

Sie können den Auswähler so gestalten, dass er auf die Browsersprache des Benutzers reagiert.

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

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

Der Auswähler zeigt automatisch Ländernamen in der bevorzugten Sprache des Benutzers basierend auf seinen Browsereinstellungen an.

Alle verfügbaren Länder abrufen

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

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

console.log(allCountries.length);
// 249 (approximate count as of 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ändername. 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 Sprachen, da Ländernamen in verschiedenen Alphabeten und Sortierregeln unterschiedlich sortiert werden.

Erstellen einer umfassenden Länderauswahl

Kombinieren Sie Intl.supportedValuesOf() mit Intl.DisplayNames, um eine Auswahl 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);

Diese Auswahl umfasst alle 249 vom Browser unterstützten Länder und Gebiete, 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 angezeigt werden. 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, z. B. in der mobilen Navigation oder kompakten Tabellen.

Anzeige von Regionsnamen für Territorien

Der ISO 3166-1-Standard umfasst Territorien, Abhängigkeiten und Sondergebiete zusätzlich zu unabhängigen Ländern. Die Intl.DisplayNames-API verarbeitet 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 genauso wie Ländercodes. Ihre Anwendung kann sie einheitlich behandeln, während der Browser die entsprechenden lokalisierten 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 sprachübergreifend.

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üssen, 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 Formatter 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 Formatter mit Locale und Typ als Schlüssel. Nachfolgende Aufrufe verwenden vorhandene Formatter wieder, anstatt neue zu erstellen.

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

Umgang mit Locale-Fallbacks

Der Intl.DisplayNames-Konstruktor akzeptiert ein Array von Locales. Wenn das erste Locale nicht unterstützt wird, greift der Browser auf das 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 das angeforderte Locale nicht verfügbar ist.

Sie können überprüfen, welches Gebietsschema der Formatter tatsächlich verwendet.

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

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

Die resolvedOptions()-Methode gibt das Gebietsschema zurück, zu dem der Formatter nach der Fallback-Verarbeitung aufgelöst wurde.

Ländernamen sprachübergreifend vergleichen

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 Formatter verarbeitet 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 in allen wichtigen Browsern unterstützt, einschließlich Chrome, Firefox, Safari und Edge.

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 mithilfe einer statischen Lookup-Tabelle mit 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.