Wie man Locale-Kennungen aus Komponenten erstellt

Konstruieren Sie Locale-Kennungen durch Kombination von Sprach-, Skript- und Regionscodes in JavaScript

Einführung

Locale-Kennungen wie en-US oder zh-Hans-CN codieren Informationen über Sprache, Schriftsystem und Region. Manchmal müssen Sie diese Kennungen programmatisch erstellen, anstatt einen festen String zu verwenden. Beispielsweise könnten Sie Benutzer ihre Sprache und Region separat auswählen lassen und diese dann zu einer gültigen Locale-Kennung kombinieren.

JavaScripts Intl.Locale-Konstruktor ermöglicht es Ihnen, Locale-Kennungen aus einzelnen Komponenten zu erstellen. Sie können Sprache, Schrift und Region als separate Parameter angeben, und der Konstruktor fügt sie zu einer korrekt formatierten Kennung zusammen.

Dieser Leitfaden erklärt, wie man Locale-Kennungen aus Komponenten konstruiert, wann dieser Ansatz verwendet werden sollte und wie man mit Sonderfällen umgeht.

Verständnis der Komponenten von Locale-Kennungen

Locale-Kennungen 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 spezifiziert das Schriftsystem. Er verwendet vier Buchstaben mit dem ersten Buchstaben großgeschrieben, aus ISO 15924:

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

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

  • US für die Vereinigten Staaten
  • GB für das Vereinigte Königreich
  • CN für China
  • MX für Mexiko

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

Erstellung von Locales nur mit Sprache und Region

Das häufigste Szenario ist die Kombination von Sprach- und Regionscodes. Die meisten Anwendungen müssen das Skript nicht angeben, da jede Sprache ein Standardskript hat.

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

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

console.log(locale.toString());
// Ausgabe: "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.

Erstellung von Locales mit Sprache, Skript und Region

Einige Sprachen erfordern explizite Skriptcodes. Chinesisch, Serbisch und einige andere Sprachen verwenden mehrere Schriftsysteme. Sie müssen das Skript angeben, um Mehrdeutigkeiten zu vermeiden.

Sie können die Skriptkomponente zum Options-Objekt hinzufügen:

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

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

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

Traditionales Chinesisch verwendet ein anderes Skript und eine andere Region:

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

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

Der Skriptcode unterscheidet zwischen den beiden Schriftsystemen.

Serbisch verwendet sowohl kyrillische als auch lateinische Schrift. Sie müssen angeben, welches Skript 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, jedoch mit unterschiedlichen Schriftsystemen.

Erstellung von Locales aus Benutzerauswahlen

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 aus dem 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.

Erstellung von Locales mit optionalen Komponenten

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

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

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

Dies repräsentiert Französisch, ohne eine bestimmte Region oder Skript anzugeben.

Sie können Komponenten basierend auf Benutzereingaben bedingt einbeziehen:

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 den verfügbaren Informationen.

Überschreiben von Komponenten in vorhandenen Locales

Sie können eine vorhandene Locale-Kennung verwenden und bestimmte 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 beibehalten wird.

Hinzufügen von Formatierungspräferenzen zu konstruierten Locales

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

Sie können Kalenderpräferenzen beim Erstellen einer 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 Kennungszeichenfolge.

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 die Erweiterungsschlüssel alphabetisch an.

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: "١٢٬٣٤٥" (Arabisch-indische Ziffern)

Die Nummerierungssystemprä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:

// Syntaktisch gültig, aber semantisch fragwürdig
const locale = new Intl.Locale("en", {
  script: "Arab",
  region: "JP"
});

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

Dies konstruiert eine Locale für Englisch in arabischer Schrift in Japan. Die Kennung ist gemäß BCP 47 gültig, repräsentiert aber keine reale Locale.

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

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

console.log(maximized.toString());
// Ausgabe: "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 konstruierten Locales

Nach der Konstruktion einer Locale können Sie ihre Komponenten als Eigenschaften auslesen.

Die Eigenschaft language gibt den Sprachcode zurück:

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

Die Eigenschaft region gibt den Regionscode zurück:

const locale = new Intl.Locale("fr", { region: "CA" });
console.log(locale.region);
// Ausgabe: "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);
// Ausgabe: "Hans"

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

const locale = new Intl.Locale("en", { region: "US" });
console.log(locale.script);
// Ausgabe: 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);
// Ausgabe: "ar-SA"

Dies liefert den Sprache-Schrift-Region-Teil ohne Formatierungspräferenzen.

Umwandlung 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);
// Ausgabe: "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));
// Ausgabe: "1.234,56"

Der Formatter akzeptiert die String-Repräsentation.

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 bei Bedarf intern toString() 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 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();
}

// Benutzer wählt "Spanisch" und "Mexiko"
const selectedLocale = createLocaleFromPicker(
  { value: "es" },
  { value: "MX" }
);

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

Generieren 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);
// Ausgabe: ["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 häufig Locale-Präferenzen 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"

Normalisieren von Locale-Kennungen

Sie können Locale-Kennungen 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 (ungültiger Separator)

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

Konfigurieren von Formatierern mit Benutzereinstellungen

Sie können Locale-Kennungen mit Formatierungseinstellungen 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-Stunden-Format)

Die Locale enthält Formatierungseinstellungen aus den Benutzereinstellungen.

Wann man Locales aus Komponenten erstellen sollte

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 programmatisch Locale-Varianten generieren.

Verwenden Sie einen literalen String für feste Locales:

// Gut für feste Locales
const locale = new Intl.Locale("en-US");

Erstellen Sie aus Komponenten, wenn Werte aus Variablen stammen:

// Gut für dynamische Locales
const locale = new Intl.Locale(userLanguage, {
  region: userRegion
});

Der Konstruktor validiert Komponenten und erstellt eine korrekt formatierte Kennung.

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 höher.

Zusammenfassung

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

Wichtige Konzepte:

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

Verwenden Sie diesen Ansatz, wenn Sie Locales aus Benutzereingaben erstellen, regionale Varianten generieren oder separate Sprach- und Regionsauswahlen kombinieren. Für feste Locales verwenden Sie stattdessen String-Literale.