Wie man Sprache, Land und Skript aus einem Gebietsschema extrahiert

Verwenden Sie JavaScript, um Gebietsschema-Kennungen zu analysieren und auf ihre einzelnen Komponenten zuzugreifen

Einführung

Gebietsschema-Kennungen wie en-US, fr-CA und zh-Hans-CN kodieren mehrere Informationen in einer einzigen Zeichenfolge. Diese Komponenten geben die verwendete Sprache, die Region, in der sie gesprochen wird, und manchmal das Schriftsystem an.

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

Dieser Leitfaden erklärt, welche Komponenten in Gebietsschema-Kennungen existieren, wie man sie mit der Intl.Locale-API extrahiert und wann man diese Komponenten in der Praxis benötigen würde.

Welche Komponenten existieren in Gebietsschema-Kennungen

Gebietsschema-Kennungen folgen dem BCP 47-Standard, der eine Struktur zur Beschreibung von Sprachen und regionalen Variationen definiert. Eine vollständige Gebietsschema-Kennung kann mehrere durch Bindestriche getrennte Komponenten enthalten.

Die drei häufigsten Komponenten sind:

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

Eine einfache Gebietsschema-Kennung enthält nur einen Sprachcode:

en

Die meisten Gebietsschema-Kennungen umfassen eine Sprache und eine Region:

en-US
fr-CA
es-MX

Einige Gebietsschema-Kennungen 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 Sprachfallbacks, Inhaltsauswahl und Anpassung der Benutzeroberfläche.

Verwendung von Intl.Locale zur Extraktion von Komponenten

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

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

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

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

Das Locale-Objekt stellt Eigenschaften bereit, die den einzelnen Komponenten des Identifikators entsprechen. Diese Eigenschaften bieten strukturierten Zugriff, ohne dass eine String-Analyse erforderlich ist.

Extraktion des Sprachcodes

Die Eigenschaft language gibt die Sprachkomponente des Gebietsschema-Identifikators zurück. Dies ist der zwei- oder dreibuchstabige Code, der die Hauptsprache 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 Gebietsschema-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 Sprachauswahlen für Benutzer zu erstellen.

Extraktion des Regionscodes

Die Eigenschaft region gibt die Regionskomponente des Gebietsschema-Identifikators zurück. Dies ist der zweibuchstabige Code, der das geografische Gebiet identifiziert, in dem 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, um Länder und Territorien darzustellen. 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, wie Datumsangaben, Zahlen und Währungen formatiert werden. Amerikanisches Englisch verwendet Monat-Tag-Jahr-Datumsformate und Punkte als Dezimaltrennzeichen. Britisches Englisch verwendet Tag-Monat-Jahr-Datumsformate und Kommas als Tausendertrennzeichen.

Regionscodes sind in Gebietsschema-Identifikatoren optional. Wenn ein Gebietsschema keine Region hat, gibt die Eigenschaft region 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 Skript-Codes

Die Eigenschaft script gibt die Skriptkomponente des Gebietsschema-Identifikators zurück. Dies ist der vierstellige Code, der das Schriftsystem identifiziert, das zur Darstellung der Sprache verwendet wird.

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"

Skript-Codes folgen dem ISO 15924-Standard. Sie verwenden vier Buchstaben, wobei der erste Buchstabe großgeschrieben wird. Häufige 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 Gebietsschemas lassen den Skript-Code weg, da jede Sprache ein Standard-Schriftsystem hat. Englisch verwendet standardmäßig die lateinische Schrift, daher schreibt man en anstatt en-Latn. Russisch verwendet standardmäßig die kyrillische Schrift, daher schreibt man ru anstatt 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 gibt der Skript-Code an, welches Schriftsystem verwendet werden soll.

Wenn das Gebietsschema 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, die Textdarstellung zu bestimmen oder Inhalte nach Schriftsystem zu filtern.

Verstehen, wann Komponenten undefined sind

Nicht alle Gebietsschema-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 überprüfen, ob ein Gebietsschema eine Region oder ein Skript angibt, 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 Gebietsschema-Fallback-Ketten hilft die Überprüfung auf undefinierte Komponenten bei der Konstruktion von Alternativen:

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 Gebietsschema-Identifikatoren, die von der spezifischsten bis zur allgemeinsten geordnet sind.

Praktische Anwendungsfälle für die Extraktion von Komponenten

Die Extraktion von Locale-Komponenten löst mehrere häufige Probleme beim Aufbau internationalisierter Anwendungen.

Gruppierung von Locales nach Sprache

Bei der Anzeige einer Liste verfügbarer Sprachen 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.

Erstellung von Locale-Selektoren

Bei der Erstellung einer Benutzeroberfläche für die Sprachauswahl extrahieren Sie Komponenten, um aussagekräftige Bezeichnungen 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.

Filterung nach Region

Wenn Sie Inhalte anzeigen müssen, die für eine bestimmte Region spezifisch 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 Skriptkompatibilität

Bei der Auswahl von Schriftarten oder beim Rendern von Text sollte das Skript auf Kompatibilität geprüft werden:

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 dargestellt wird.

Implementierung von Sprachfallbacks

Wenn die bevorzugte Sprache des Benutzers nicht verfügbar ist, wird auf die Basissprache zurückgegriffen:

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 keine exakten Übereinstimmungen verfügbar sind.