Wie man Locale-Identifikatoren aus Komponenten erstellt

Erstellen Sie Locale-Identifikatoren durch Kombination von Sprach-, Schrift- und Regionscodes in JavaScript

Einführung

Locale-Identifikatoren wie en-US oder zh-Hans-CN kodieren Informationen über Sprache, Schriftsystem und Region. Manchmal müssen Sie diese Identifikatoren programmatisch erstellen, anstatt einen festen String zu verwenden. Beispielsweise könnten Sie Benutzern ermöglichen, ihre Sprache und Region separat auszuwählen und diese dann zu einem gültigen Locale-Identifikator zu kombinieren.

Der Intl.Locale-Konstruktor von JavaScript ermöglicht es Ihnen, Locale-Identifikatoren aus einzelnen Komponenten zu erstellen. Sie können Sprache, Schrift und Region als separate Parameter angeben, und der Konstruktor fügt sie zu einem korrekt formatierten Identifikator zusammen.

Dieser Leitfaden erklärt, wie Sie Locale-Identifikatoren aus Komponenten erstellen, wann Sie diesen Ansatz verwenden sollten und wie Sie Sonderfälle handhaben.

Komponenten von Locale-Identifikatoren verstehen

Locale-Identifikatoren bestehen aus Komponenten, die durch Bindestriche getrennt sind. Jede Komponente repräsentiert einen anderen Aspekt kultureller Präferenzen.

Der Sprachcode gibt an, welche Sprache verwendet werden soll. Er verwendet zwei oder drei Kleinbuchstaben aus ISO 639:

  • en für Englisch
  • es für Spanisch
  • fr für Französisch
  • zh für Chinesisch
  • ar für Arabisch

Der Schriftcode gibt das Schriftsystem an. Er verwendet vier Buchstaben, wobei der erste Buchstabe großgeschrieben wird, aus ISO 15924:

  • Hans für vereinfachte chinesische Schriftzeichen
  • Hant für traditionelle chinesische Schriftzeichen
  • Cyrl für kyrillische Schrift
  • Latn für lateinische Schrift

Der Regionscode gibt das geografische Gebiet an. Er verwendet zwei Großbuchstaben aus ISO 3166-1 oder drei Ziffern aus UN M.49:

  • US für Vereinigte Staaten
  • GB für Vereinigtes Königreich
  • CN für China
  • MX für Mexiko

Diese Komponenten werden in einer bestimmten Reihenfolge kombiniert: Sprache, dann Schrift, dann Region. Zum Beispiel bedeutet zh-Hans-CN chinesische Sprache, vereinfachte Schrift, Region China.

Locales nur mit Sprache und Region erstellen

Das häufigste Szenario ist die Kombination von Sprach- und Regionscodes. Die meisten Anwendungen müssen die Schrift nicht angeben, da jede Sprache eine Standardschrift hat.

Sie können ein Locale erstellen, indem Sie den Sprachcode als erstes Argument und ein Optionsobjekt mit der Region übergeben:

const locale = new Intl.Locale("en", {
  region: "US"
});

console.log(locale.toString());
// Output: "en-US"

Dies erstellt einen Locale-Identifier für amerikanisches Englisch.

Sie können verschiedene regionale Varianten derselben Sprache erstellen:

const usEnglish = new Intl.Locale("en", { region: "US" });
const britishEnglish = new Intl.Locale("en", { region: "GB" });
const canadianEnglish = new Intl.Locale("en", { region: "CA" });

console.log(usEnglish.toString()); // "en-US"
console.log(britishEnglish.toString()); // "en-GB"
console.log(canadianEnglish.toString()); // "en-CA"

Jede Variante verwendet dieselbe Sprache, aber unterschiedliche regionale Formatierungskonventionen.

Locales mit Sprache, Schrift und Region erstellen

Einige Sprachen erfordern explizite Schriftcodes. Chinesisch, Serbisch und einige andere Sprachen verwenden mehrere Schriftsysteme. Sie müssen die Schrift angeben, um Mehrdeutigkeiten zu vermeiden.

Sie können die Schriftkomponente zum Optionsobjekt hinzufügen:

const simplifiedChinese = new Intl.Locale("zh", {
  script: "Hans",
  region: "CN"
});

console.log(simplifiedChinese.toString());
// Output: "zh-Hans-CN"

Dies erstellt ein Locale für vereinfachtes Chinesisch, wie es in China verwendet wird.

Traditionelles Chinesisch verwendet eine andere Schrift und Region:

const traditionalChinese = new Intl.Locale("zh", {
  script: "Hant",
  region: "TW"
});

console.log(traditionalChinese.toString());
// Output: "zh-Hant-TW"

Der Schriftcode unterscheidet zwischen den beiden Schriftsystemen.

Serbisch verwendet sowohl kyrillische als auch lateinische Schrift. Sie müssen angeben, welche Schrift verwendet werden soll:

const serbianCyrillic = new Intl.Locale("sr", {
  script: "Cyrl",
  region: "RS"
});

const serbianLatin = new Intl.Locale("sr", {
  script: "Latn",
  region: "RS"
});

console.log(serbianCyrillic.toString()); // "sr-Cyrl-RS"
console.log(serbianLatin.toString()); // "sr-Latn-RS"

Beide Locales verwenden die serbische Sprache in Serbien, aber mit unterschiedlichen Schriftsystemen.

Locales aus Benutzerauswahlen erstellen

Benutzeroberflächen ermöglichen es Benutzern oft, Sprache und Region separat auszuwählen. Sie können diese Auswahlen zu einer Locale-Kennung kombinieren.

Betrachten Sie ein Einstellungsformular mit zwei Dropdown-Menüs:

function buildLocaleFromSelections(languageCode, regionCode) {
  const locale = new Intl.Locale(languageCode, {
    region: regionCode
  });

  return locale.toString();
}

const userLocale = buildLocaleFromSelections("es", "MX");
console.log(userLocale);
// Output: "es-MX"

Dies erstellt eine Locale-Kennung aus unabhängigen Auswahlen.

Sie können die Auswahlen validieren, indem Sie Fehler vom Konstruktor abfangen:

function buildLocaleFromSelections(languageCode, regionCode) {
  try {
    const locale = new Intl.Locale(languageCode, {
      region: regionCode
    });
    return {
      success: true,
      locale: locale.toString()
    };
  } catch (error) {
    return {
      success: false,
      error: error.message
    };
  }
}

const valid = buildLocaleFromSelections("fr", "CA");
console.log(valid);
// Output: { success: true, locale: "fr-CA" }

const invalid = buildLocaleFromSelections("invalid", "XX");
console.log(invalid);
// Output: { success: false, error: "..." }

Der Konstruktor wirft einen RangeError, wenn eine Komponente ungültig ist.

Locales mit optionalen Komponenten erstellen

Nicht jede Locale benötigt jede Komponente. Sie können Komponenten weglassen, die nicht erforderlich sind.

Eine Locale nur mit Sprache lässt Region und Schrift weg:

const locale = new Intl.Locale("fr");
console.log(locale.toString());
// Output: "fr"

Dies repräsentiert Französisch ohne Angabe einer bestimmten Region oder Schrift.

Sie können Komponenten basierend auf Benutzereingaben bedingt einschließen:

function buildLocale(language, options = {}) {
  const localeOptions = {};

  if (options.region) {
    localeOptions.region = options.region;
  }

  if (options.script) {
    localeOptions.script = options.script;
  }

  const locale = new Intl.Locale(language, localeOptions);
  return locale.toString();
}

console.log(buildLocale("en"));
// Output: "en"

console.log(buildLocale("en", { region: "US" }));
// Output: "en-US"

console.log(buildLocale("zh", { script: "Hans", region: "CN" }));
// Output: "zh-Hans-CN"

Die Funktion erstellt die einfachste gültige Locale-Kennung basierend auf verfügbaren Informationen.

Komponenten in bestehenden Locales überschreiben

Sie können eine bestehende Locale-Kennung nehmen und spezifische Komponenten überschreiben. Dies ist nützlich, wenn Sie einen Teil ändern müssen, während andere intakt bleiben.

Das zweite Argument des Konstruktors überschreibt Komponenten aus dem ersten Argument:

const baseLocale = new Intl.Locale("en-US");
const withDifferentRegion = new Intl.Locale(baseLocale, {
  region: "GB"
});

console.log(withDifferentRegion.toString());
// Output: "en-GB"

Die neue Locale behält die Sprache bei, ändert aber die Region.

Sie können mehrere Komponenten überschreiben:

const original = new Intl.Locale("zh-Hans-CN");
const modified = new Intl.Locale(original, {
  script: "Hant",
  region: "TW"
});

console.log(modified.toString());
// Output: "zh-Hant-TW"

Dies ändert sowohl Schrift als auch Region, während die Sprache erhalten bleibt.

Formatierungspräferenzen zu konstruierten Locales hinzufügen

Über Sprache, Schrift und Region hinaus können Locales Formatierungspräferenzen enthalten. Diese Präferenzen steuern, wie Daten, Zahlen und andere Werte angezeigt werden.

Sie können Kalenderpräferenzen beim Erstellen eines Locale hinzufügen:

const locale = new Intl.Locale("ar", {
  region: "SA",
  calendar: "islamic"
});

console.log(locale.toString());
// Output: "ar-SA-u-ca-islamic"

console.log(locale.calendar);
// Output: "islamic"

Die Kalenderpräferenz erscheint als Unicode-Erweiterung in der Identifikationszeichenkette.

Sie können mehrere Formatierungspräferenzen angeben:

const locale = new Intl.Locale("en", {
  region: "US",
  calendar: "gregory",
  numberingSystem: "latn",
  hourCycle: "h12"
});

console.log(locale.toString());
// Output: "en-US-u-ca-gregory-hc-h12-nu-latn"

Der Konstruktor ordnet Erweiterungsschlüssel alphabetisch.

Diese Präferenzen beeinflussen, wie Formatierer Daten anzeigen:

const locale = new Intl.Locale("ar", {
  region: "EG",
  numberingSystem: "arab"
});

const formatter = new Intl.NumberFormat(locale);
console.log(formatter.format(12345));
// Output: "١٢٬٣٤٥" (Arabic-Indic numerals)

Die Zahlensystempräferenz steuert, welche Ziffern angezeigt werden.

Validierung von Komponentenkombinationen

Nicht alle Kombinationen von Sprache, Schrift und Region sind sinnvoll. Der Konstruktor akzeptiert alle syntaktisch gültigen Komponenten, aber einige Kombinationen repräsentieren möglicherweise keine realen Locales.

Der Konstruktor validiert die Syntax, aber nicht die semantische Korrektheit:

// Syntactically valid but semantically questionable
const locale = new Intl.Locale("en", {
  script: "Arab",
  region: "JP"
});

console.log(locale.toString());
// Output: "en-Arab-JP"

Dies erstellt ein Locale für Englisch in arabischer Schrift in Japan. Die Kennung ist gemäß BCP 47 gültig, repräsentiert jedoch kein reales Locale.

Sie können die Methode maximize() verwenden, um zu prüfen, ob ein Locale gängigen Mustern entspricht:

const locale = new Intl.Locale("en", { region: "JP" });
const maximized = locale.maximize();

console.log(maximized.toString());
// Output: "en-Latn-JP"

Die Methode fügt die wahrscheinlichste Schrift für die Sprache hinzu. Wenn das Ergebnis den erwarteten Mustern entspricht, ist die Kombination plausibel.

Auslesen von Komponenten aus erstellten Locales

Nach dem Erstellen eines Locale können Sie dessen Komponenten als Eigenschaften auslesen.

Die Eigenschaft language gibt den Sprachcode zurück:

const locale = new Intl.Locale("fr", { region: "CA" });
console.log(locale.language);
// Output: "fr"

Die Eigenschaft region gibt den Regionscode zurück:

const locale = new Intl.Locale("fr", { region: "CA" });
console.log(locale.region);
// Output: "CA"

Die Eigenschaft script gibt den Schriftcode zurück, falls angegeben:

const locale = new Intl.Locale("zh", {
  script: "Hans",
  region: "CN"
});

console.log(locale.script);
// Output: "Hans"

Wenn das Skript nicht angegeben ist, gibt die Eigenschaft undefined zurück:

const locale = new Intl.Locale("en", { region: "US" });
console.log(locale.script);
// Output: undefined

Die Eigenschaft baseName gibt die vollständige Kennung ohne Erweiterungen zurück:

const locale = new Intl.Locale("ar", {
  region: "SA",
  calendar: "islamic",
  numberingSystem: "arab"
});

console.log(locale.baseName);
// Output: "ar-SA"

Dies gibt Ihnen den Sprache-Skript-Region-Teil ohne Formatierungspräferenzen.

Konvertierung von Locale-Kennungen in Strings

Die Methode toString() gibt die vollständige Locale-Kennung als String zurück:

const locale = new Intl.Locale("es", { region: "MX" });
const identifier = locale.toString();

console.log(identifier);
// Output: "es-MX"

Sie können den String mit anderen Intl-APIs verwenden:

const locale = new Intl.Locale("de", { region: "DE" });
const formatter = new Intl.NumberFormat(locale.toString());

const price = 1234.56;
console.log(formatter.format(price));
// Output: "1.234,56"

Der Formatter akzeptiert die String-Darstellung.

Die meisten Intl-APIs akzeptieren auch Locale-Objekte direkt:

const locale = new Intl.Locale("de", { region: "DE" });
const formatter = new Intl.NumberFormat(locale);

Die API ruft toString() bei Bedarf intern auf.

Praktische Anwendungsfälle

Das Erstellen von Locale-Kennungen aus Komponenten löst mehrere häufige Probleme in internationalisierten Anwendungen.

Erstellen von Locale-Auswahlmenüs

Benutzeroberflächen ermöglichen es Benutzern oft, Sprache und Region separat auszuwählen. Sie kombinieren die Auswahlen:

function createLocaleFromPicker(languageSelect, regionSelect) {
  const language = languageSelect.value;
  const region = regionSelect.value;

  const locale = new Intl.Locale(language, { region });
  return locale.toString();
}

// User selects "Spanish" and "Mexico"
const selectedLocale = createLocaleFromPicker(
  { value: "es" },
  { value: "MX" }
);

console.log(selectedLocale);
// Output: "es-MX"

Generierung von Locale-Varianten

Sie können mehrere regionale Varianten aus einem einzelnen Sprachcode generieren:

function generateRegionalVariants(languageCode, regionCodes) {
  return regionCodes.map(regionCode => {
    const locale = new Intl.Locale(languageCode, {
      region: regionCode
    });
    return locale.toString();
  });
}

const englishVariants = generateRegionalVariants("en", [
  "US",
  "GB",
  "CA",
  "AU",
  "NZ"
]);

console.log(englishVariants);
// Output: ["en-US", "en-GB", "en-CA", "en-AU", "en-NZ"]

Dies erstellt eine Liste von Locale-Kennungen für verschiedene englischsprachige Regionen.

Erstellen von Locales aus URL-Parametern

URLs kodieren Locale-Präferenzen oft als separate Parameter. Sie können eine Locale aus diesen Parametern konstruieren:

function getLocaleFromURL(url) {
  const params = new URL(url).searchParams;
  const language = params.get("lang");
  const region = params.get("region");

  if (!language) {
    return null;
  }

  const options = {};
  if (region) {
    options.region = region;
  }

  try {
    const locale = new Intl.Locale(language, options);
    return locale.toString();
  } catch (error) {
    return null;
  }
}

const locale1 = getLocaleFromURL("https://example.com?lang=fr&region=CA");
console.log(locale1);
// Output: "fr-CA"

const locale2 = getLocaleFromURL("https://example.com?lang=ja");
console.log(locale2);
// Output: "ja"

Normalisierung von Locale-Identifikatoren

Sie können Locale-Identifikatoren normalisieren, indem Sie sie parsen und rekonstruieren:

function normalizeLocale(identifier) {
  try {
    const locale = new Intl.Locale(identifier);
    return locale.toString();
  } catch (error) {
    return null;
  }
}

console.log(normalizeLocale("EN-us"));
// Output: "en-US"

console.log(normalizeLocale("zh_Hans_CN"));
// Output: null (invalid separator)

Der Konstruktor normalisiert die Groß-/Kleinschreibung und validiert die Struktur.

Konfiguration von Formatierern mit Benutzerpräferenzen

Sie können Locale-Identifikatoren mit Formatierungspräferenzen basierend auf Benutzereinstellungen erstellen:

function buildFormatterLocale(language, region, preferences) {
  const locale = new Intl.Locale(language, {
    region,
    hourCycle: preferences.use24Hour ? "h23" : "h12",
    numberingSystem: preferences.numberingSystem
  });

  return locale;
}

const userPreferences = {
  use24Hour: true,
  numberingSystem: "latn"
};

const locale = buildFormatterLocale("fr", "FR", userPreferences);

const timeFormatter = new Intl.DateTimeFormat(locale, {
  hour: "numeric",
  minute: "numeric"
});

const now = new Date("2025-10-15T14:30:00");
console.log(timeFormatter.format(now));
// Output: "14:30" (24-hour format)

Die Locale enthält Formatierungspräferenzen aus den Benutzereinstellungen.

Wann Locales aus Komponenten erstellt werden sollten

Das Erstellen von Locales aus Komponenten ist in bestimmten Szenarien nützlich. Verwenden Sie diesen Ansatz, wenn Sie separate Sprach- und Regionsdaten haben, wenn Sie Benutzereingaben verarbeiten oder wenn Sie Locale-Varianten programmatisch generieren.

Verwenden Sie einen Literal-String für feste Locales:

// Good for fixed locales
const locale = new Intl.Locale("en-US");

Erstellen Sie aus Komponenten, wenn Werte aus Variablen stammen:

// Good for dynamic locales
const locale = new Intl.Locale(userLanguage, {
  region: userRegion
});

Der Konstruktor validiert Komponenten und erstellt einen korrekt formatierten Identifikator.

Browser-Unterstützung

Der Intl.Locale-Konstruktor funktioniert in allen modernen Browsern. Chrome, Firefox, Safari und Edge unterstützen den Konstruktor und das Options-Objekt zum Erstellen von Locales aus Komponenten.

Node.js unterstützt Intl.Locale ab Version 12, mit vollständiger Unterstützung für alle Konstruktor-Optionen in Version 14 und später.

Zusammenfassung

Der Intl.Locale-Konstruktor erstellt Locale-Identifikatoren aus einzelnen Komponenten. Sie übergeben den Sprachcode als erstes Argument und geben Schrift, Region und Formatierungspräferenzen in einem Options-Objekt an.

Wichtige Konzepte:

  • Locale-Identifikatoren bestehen aus Sprach-, Schrift- und Regionskomponenten
  • Der Konstruktor akzeptiert ein Options-Objekt mit language-, script- und region-Properties
  • Sie können Komponenten einer bestehenden Locale überschreiben, indem Sie diese als erstes Argument übergeben
  • Formatierungspräferenzen wie calendar und hourCycle erscheinen als Unicode-Erweiterungen
  • Die toString()-Methode gibt den vollständigen Identifikator-String zurück
  • Properties wie language, region und script ermöglichen das Auslesen von Komponenten
  • Der Konstruktor validiert die Syntax, aber nicht die semantische Korrektheit

Verwenden Sie diesen Ansatz beim Erstellen von Locales aus Benutzereingaben, beim Generieren regionaler Varianten oder beim Kombinieren separater Sprach- und Regionsauswahlen. Verwenden Sie für feste Locales stattdessen String-Literale.