So extrahieren Sie Sprache, Land und Schrift aus einem Locale

Verwenden Sie JavaScript, um Locale-Identifikatoren zu parsen und auf ihre einzelnen Komponenten zuzugreifen

Einführung

Locale-Identifikatoren wie en-US, fr-CA und zh-Hans-CN kodieren mehrere Informationen in einem einzigen String. Diese Komponenten geben an, welche Sprache verwendet wird, in welcher Region sie gesprochen wird und manchmal auch das verwendete Schriftsystem.

Beim Erstellen internationalisierter Anwendungen müssen Sie häufig diese einzelnen Komponenten extrahieren. Möglicherweise möchten Sie Benutzern nur den Sprachnamen anzeigen, Locales nach Region gruppieren oder prüfen, welches Schriftsystem ein Locale verwendet. Anstatt Strings manuell mit regulären Ausdrücken zu parsen, bietet JavaScript die Intl.Locale-API, um Komponenten zuverlässig zu extrahieren.

Dieser Leitfaden erklärt, welche Komponenten in Locale-Identifikatoren existieren, wie Sie diese mithilfe der Intl.Locale-API extrahieren und wann Sie diese Komponenten in der Praxis benötigen.

Welche Komponenten existieren in Locale-Identifikatoren

Locale-Identifikatoren folgen dem BCP-47-Standard, der eine Struktur zur Beschreibung von Sprachen und regionalen Variationen definiert. Ein vollständiger Locale-Identifikator kann mehrere durch Bindestriche getrennte Komponenten enthalten.

Die drei häufigsten Komponenten sind:

  • Sprache: Die primär verwendete Sprache, wie Englisch, Spanisch oder Chinesisch
  • Region: Das geografische Gebiet, in dem die Sprache verwendet wird, wie die Vereinigten Staaten, Kanada oder China
  • Schrift: Das Schriftsystem, das zur Darstellung der Sprache verwendet wird, wie lateinische, kyrillische oder Han-Zeichen

Ein einfacher Locale-Identifikator enthält nur einen Sprachcode:

en

Die meisten Locale-Identifikatoren enthalten eine Sprache und eine Region:

en-US
fr-CA
es-MX

Einige Locale-Identifikatoren enthalten ein Skript, wenn die Sprache in mehreren Schriftsystemen geschrieben werden kann:

zh-Hans-CN
zh-Hant-TW
sr-Cyrl-RS
sr-Latn-RS

Das Verständnis dieser Komponenten hilft Ihnen bei Entscheidungen über Sprach-Fallbacks, Content-Auswahl und Anpassung der Benutzeroberfläche.

Verwendung von Intl.Locale zur Extraktion von Komponenten

Die Intl.Locale-API konvertiert Locale-Identifikator-Strings in strukturierte Objekte. Sobald Sie ein Locale-Objekt erstellt haben, können Sie dessen Komponenten über Properties auslesen.

Erstellen Sie ein Locale-Objekt, indem Sie den Identifikator an den Constructor übergeben:

const locale = new Intl.Locale("en-US");

console.log(locale.language); // "en"
console.log(locale.region); // "US"

Das Locale-Objekt stellt Properties bereit, die jeder Komponente des Identifikators entsprechen. Diese Properties ermöglichen strukturierten Zugriff ohne String-Parsing.

Extraktion des Sprachcodes

Die language-Property gibt die Sprachkomponente des Locale-Identifikators zurück. Dies ist der zwei- oder dreibuchstabige Code, der die primäre Sprache identifiziert.

const english = new Intl.Locale("en-US");
console.log(english.language); // "en"

const french = new Intl.Locale("fr-CA");
console.log(french.language); // "fr"

const chinese = new Intl.Locale("zh-Hans-CN");
console.log(chinese.language); // "zh"

Sprachcodes folgen dem ISO-639-Standard. Gängige Codes sind en für Englisch, es für Spanisch, fr für Französisch, de für Deutsch, ja für Japanisch und zh für Chinesisch.

Der Sprachcode ist in einem gültigen Locale-Identifikator immer vorhanden. Er ist die einzige erforderliche Komponente.

const languageOnly = new Intl.Locale("ja");
console.log(languageOnly.language); // "ja"
console.log(languageOnly.region); // undefined

Wenn Sie den Sprachcode extrahieren, können Sie ihn verwenden, um Übersetzungen auszuwählen, Textverarbeitungsregeln zu bestimmen oder Sprachselektoren für Benutzer zu erstellen.

Extraktion des Regionscodes

Die region-Property gibt die Regionskomponente des Locale-Identifikators zurück. Dies ist der zweibuchstabige Code, der die geografische Region identifiziert, in der die Sprache verwendet wird.

const americanEnglish = new Intl.Locale("en-US");
console.log(americanEnglish.region); // "US"

const britishEnglish = new Intl.Locale("en-GB");
console.log(britishEnglish.region); // "GB"

const canadianFrench = new Intl.Locale("fr-CA");
console.log(canadianFrench.region); // "CA"

Regionscodes folgen dem ISO 3166-1-Standard. Sie verwenden zwei Großbuchstaben zur Darstellung von Ländern und Territorien. Gängige Codes sind US für die Vereinigten Staaten, GB für das Vereinigte Königreich, CA für Kanada, MX für Mexiko, FR für Frankreich und CN für China.

Der Regionscode beeinflusst die Formatierung von Datumsangaben, Zahlen und Währungen. Amerikanisches Englisch verwendet das Format Monat-Tag-Jahr für Datumsangaben und Punkte als Dezimaltrennzeichen. Britisches Englisch verwendet das Format Tag-Monat-Jahr für Datumsangaben und Kommas als Tausendertrennzeichen.

Regionscodes sind in Locale-Identifikatoren optional. Wenn ein Locale keine Region aufweist, gibt die Eigenschaft region den Wert undefined zurück:

const genericSpanish = new Intl.Locale("es");
console.log(genericSpanish.region); // undefined

Wenn Sie den Regionscode extrahieren, können Sie ihn verwenden, um regionale Formatierungen anzupassen, regionsspezifische Inhalte auszuwählen oder Standortinformationen für Benutzer anzuzeigen.

Extrahieren des Schriftcodes

Die Eigenschaft script gibt die Schriftkomponente des Locale-Identifikators zurück. Dies ist der vierstellige Code, der das zur Darstellung der Sprache verwendete Schriftsystem identifiziert.

const simplifiedChinese = new Intl.Locale("zh-Hans-CN");
console.log(simplifiedChinese.script); // "Hans"

const traditionalChinese = new Intl.Locale("zh-Hant-TW");
console.log(traditionalChinese.script); // "Hant"

const serbianCyrillic = new Intl.Locale("sr-Cyrl-RS");
console.log(serbianCyrillic.script); // "Cyrl"

const serbianLatin = new Intl.Locale("sr-Latn-RS");
console.log(serbianLatin.script); // "Latn"

Schriftcodes folgen dem ISO 15924-Standard. Sie verwenden vier Buchstaben, wobei der erste Buchstabe großgeschrieben wird. Gängige Codes sind Latn für lateinische Schrift, Cyrl für kyrillische Schrift, Hans für vereinfachte Han-Zeichen, Hant für traditionelle Han-Zeichen und Arab für arabische Schrift.

Die meisten Locales lassen den Schriftcode weg, da jede Sprache ein Standardschriftsystem besitzt. Englisch verwendet standardmäßig lateinische Schrift, daher schreibt man en anstelle von en-Latn. Russisch verwendet standardmäßig kyrillische Schrift, daher schreibt man ru anstelle von ru-Cyrl.

Skript-Codes erscheinen, wenn eine Sprache auf mehrere Arten geschrieben werden kann. Chinesisch verwendet sowohl vereinfachte als auch traditionelle Zeichen. Serbisch verwendet sowohl kyrillische als auch lateinische Alphabete. In diesen Fällen disambiguiert der Skript-Code, welches Schriftsystem verwendet werden soll.

Wenn das Locale keinen expliziten Skript-Code hat, gibt die Eigenschaft script undefined zurück:

const english = new Intl.Locale("en-US");
console.log(english.script); // undefined

Wenn Sie den Skript-Code extrahieren, können Sie ihn verwenden, um Schriftarten auszuwählen, Text-Rendering zu bestimmen oder Inhalte nach Schriftsystem zu filtern.

Verstehen, wann Komponenten undefined sind

Nicht alle Locale-Identifikatoren enthalten alle Komponenten. Der Sprachcode ist erforderlich, aber Region und Skript sind optional.

Wenn eine Komponente im Identifikator nicht vorhanden ist, gibt die entsprechende Eigenschaft undefined zurück:

const locale = new Intl.Locale("fr");

console.log(locale.language); // "fr"
console.log(locale.region); // undefined
console.log(locale.script); // undefined

Dieses Verhalten ermöglicht es Ihnen zu prüfen, ob ein Locale eine Region oder ein Skript spezifiziert, bevor Sie diese Werte verwenden:

const locale = new Intl.Locale("en-US");

if (locale.region) {
  console.log(`Region-specific formatting for ${locale.region}`);
} else {
  console.log("Using default formatting");
}

Sie können den Nullish-Coalescing-Operator verwenden, um Standardwerte bereitzustellen:

const locale = new Intl.Locale("es");
const region = locale.region ?? "ES";

console.log(region); // "ES"

Beim Erstellen von Locale-Fallback-Ketten hilft die Prüfung auf undefined-Komponenten dabei, Alternativen zu konstruieren:

function buildFallbackChain(identifier) {
  const locale = new Intl.Locale(identifier);
  const fallbacks = [identifier];

  if (locale.region) {
    fallbacks.push(locale.language);
  }

  return fallbacks;
}

console.log(buildFallbackChain("fr-CA")); // ["fr-CA", "fr"]
console.log(buildFallbackChain("fr")); // ["fr"]

Dies erstellt eine Liste von Locale-Identifikatoren, die von am spezifischsten bis am allgemeinsten geordnet sind.

Praktische Anwendungsfälle für das Extrahieren von Komponenten

Das Extrahieren von Locale-Komponenten löst mehrere häufige Probleme beim Erstellen internationalisierter Anwendungen.

Gruppieren von Locales nach Sprache

Wenn Sie eine Liste verfügbarer Sprachen anzeigen, gruppieren Sie Locales, die denselben Sprachcode teilen:

const locales = ["en-US", "en-GB", "fr-FR", "fr-CA", "es-ES", "es-MX"];

const grouped = locales.reduce((groups, identifier) => {
  const locale = new Intl.Locale(identifier);
  const language = locale.language;

  if (!groups[language]) {
    groups[language] = [];
  }

  groups[language].push(identifier);
  return groups;
}, {});

console.log(grouped);
// {
//   en: ["en-US", "en-GB"],
//   fr: ["fr-FR", "fr-CA"],
//   es: ["es-ES", "es-MX"]
// }

Diese Organisation hilft Benutzern, ihre bevorzugte regionale Variante innerhalb einer Sprache zu finden.

Erstellen von Locale-Selektoren

Beim Erstellen einer Benutzeroberfläche für die Sprachauswahl extrahieren Sie Komponenten, um aussagekräftige Labels anzuzeigen:

function buildLocaleSelector(identifiers) {
  return identifiers.map(identifier => {
    const locale = new Intl.Locale(identifier);

    const languageNames = new Intl.DisplayNames([identifier], {
      type: "language"
    });

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

    return {
      value: identifier,
      language: languageNames.of(locale.language),
      region: locale.region ? regionNames.of(locale.region) : null
    };
  });
}

const options = buildLocaleSelector(["en-US", "en-GB", "fr-FR"]);
console.log(options);
// [
//   { value: "en-US", language: "English", region: "United States" },
//   { value: "en-GB", language: "English", region: "United Kingdom" },
//   { value: "fr-FR", language: "French", region: "France" }
// ]

Dies bietet menschenlesbare Bezeichnungen für jede Locale-Option.

Filtern nach Region

Wenn Sie Inhalte anzeigen müssen, die spezifisch für eine Region sind, extrahieren Sie den Regionscode, um Locales zu filtern:

function filterByRegion(identifiers, targetRegion) {
  return identifiers.filter(identifier => {
    const locale = new Intl.Locale(identifier);
    return locale.region === targetRegion;
  });
}

const allLocales = ["en-US", "es-US", "en-GB", "fr-FR", "zh-CN"];
const usLocales = filterByRegion(allLocales, "US");

console.log(usLocales); // ["en-US", "es-US"]

Dies hilft Ihnen, Locales auszuwählen, die für Benutzer in einem bestimmten Land geeignet sind.

Überprüfung der Schriftsystem-Kompatibilität

Beim Auswählen von Schriftarten oder beim Rendern von Text überprüfen Sie das Schriftsystem, um Kompatibilität sicherzustellen:

function selectFont(identifier) {
  const locale = new Intl.Locale(identifier);
  const script = locale.script;

  if (script === "Hans" || script === "Hant") {
    return "Noto Sans CJK";
  } else if (script === "Arab") {
    return "Noto Sans Arabic";
  } else if (script === "Cyrl") {
    return "Noto Sans";
  } else {
    return "Noto Sans";
  }
}

console.log(selectFont("zh-Hans-CN")); // "Noto Sans CJK"
console.log(selectFont("ar-SA")); // "Noto Sans Arabic"
console.log(selectFont("en-US")); // "Noto Sans"

Dies stellt sicher, dass Text für jedes Schriftsystem korrekt gerendert wird.

Implementierung von Sprach-Fallback

Wenn die bevorzugte Locale des Benutzers nicht verfügbar ist, greifen Sie auf die Basissprache zurück:

function selectBestLocale(userPreference, supportedLocales) {
  const user = new Intl.Locale(userPreference);

  if (supportedLocales.includes(userPreference)) {
    return userPreference;
  }

  const languageMatch = supportedLocales.find(supported => {
    const locale = new Intl.Locale(supported);
    return locale.language === user.language;
  });

  if (languageMatch) {
    return languageMatch;
  }

  return supportedLocales[0];
}

const supported = ["en-US", "fr-FR", "es-ES"];

console.log(selectBestLocale("en-GB", supported)); // "en-US"
console.log(selectBestLocale("fr-CA", supported)); // "fr-FR"
console.log(selectBestLocale("de-DE", supported)); // "en-US"

Dies bietet einen eleganten Fallback, wenn exakte Übereinstimmungen nicht verfügbar sind.