Wie man mit Sprach-Tags wie en-US und fr-CA arbeitet

Verstehen Sie die Struktur und Bedeutung von BCP 47 Sprach-Tags, um bessere Internationalisierungsentscheidungen zu treffen

Einführung

Sprach-Tags sind standardisierte Codes, die spezifische Sprachen und ihre regionalen Varianten identifizieren. Diese Tags erscheinen in der gesamten Internationalisierungsarbeit. Wenn Sie die bevorzugte Sprache eines Benutzers erkennen, gibt der Browser Sprach-Tags zurück. Wenn Sie Daten oder Zahlen formatieren, übergeben Sie Sprach-Tags an die Intl-API. Wenn Sie Übersetzungen laden, verwenden Sie Sprach-Tags, um zu bestimmen, welche Inhalte angezeigt werden sollen.

Das Verständnis der Funktionsweise dieser Tags hilft Ihnen, bessere Entscheidungen bezüglich Sprachauswahl, Fallback-Verhalten und Inhaltsorganisation zu treffen. Diese Lektion erklärt die Struktur von Sprach-Tags und zeigt Ihnen, wie Sie mit ihnen in JavaScript arbeiten können.

Was Sprach-Tags sind

Ein Sprach-Tag ist eine Zeichenfolge wie en, en-US oder zh-Hans-CN, die eine Sprache identifiziert und optional das Skript und die Region spezifiziert. Diese Tags folgen dem BCP 47-Standard, der vom Internet Engineering Task Force und der Internet Assigned Numbers Authority gepflegt wird.

BCP 47 steht für Best Current Practice 47. Der Standard definiert, wie Sprach-Tags aus kleineren Komponenten, sogenannten Subtags, konstruiert werden. Jedes Subtag repräsentiert einen spezifischen Aspekt der Sprache, wie beispielsweise welche Sprache verwendet wird, welches Schriftsystem sie nutzt oder mit welchem Land sie assoziiert ist.

Jede Programmiersprache und Internationalisierungsbibliothek verwendet BCP 47-Tags. Diese Konsistenz bedeutet, dass Sie dieselben Sprachkennungen in Ihrer gesamten Anwendung verwenden können, von der Browser-Erkennung über die serverseitige Formatierung bis hin zu Übersetzungsdateinamen.

Struktur von Sprach-Tags

Sprach-Tags bestehen aus Subtags, die durch Bindestriche getrennt sind. Die drei häufigsten Subtags sind Sprache, Skript und Region. Diese Subtags erscheinen immer in dieser spezifischen Reihenfolge, wenn sie vorhanden sind.

Das Sprach-Subtag kommt zuerst und ist die einzige erforderliche Komponente. Es verwendet einen zwei- oder dreibuchstabigen Code aus ISO 639. Zum Beispiel steht en für Englisch, fr für Französisch und zh für Chinesisch.

Das Skript-Subtag kommt an zweiter Stelle, wenn es vorhanden ist. Es verwendet einen vierbuchstabigen Code aus ISO 15924, der das Schriftsystem identifiziert. Zum Beispiel steht Latn für das lateinische Alphabet, Cyrl für Kyrillisch und Hans für vereinfachte chinesische Zeichen.

Das Regions-Subtag kommt zuletzt, wenn es vorhanden ist. Es verwendet einen zweibuchstabigen Code aus ISO 3166-1, der typischerweise ein Land repräsentiert. Zum Beispiel steht US für die Vereinigten Staaten, CA für Kanada und CN für China.

Beispiele für gängige Sprach-Tags

Hier sind Beispiele, die die verschiedenen Spezifitätsebenen demonstrieren, die Sie mit Sprach-Tags ausdrücken können.

Einfache Tags mit nur einer Sprache:

  • en - Englisch (keine spezifische Region oder Schrift)
  • fr - Französisch (keine spezifische Region oder Schrift)
  • es - Spanisch (keine spezifische Region oder Schrift)

Tags mit Sprache und Region:

  • en-US - Englisch wie in den Vereinigten Staaten verwendet
  • en-GB - Englisch wie in Großbritannien verwendet
  • fr-CA - Französisch wie in Kanada verwendet
  • es-MX - Spanisch wie in Mexiko verwendet

Tags mit Sprache, Schrift und Region:

  • zh-Hans-CN - Chinesisch mit vereinfachten Zeichen in China
  • zh-Hant-TW - Chinesisch mit traditionellen Zeichen in Taiwan
  • sr-Latn-RS - Serbisch mit lateinischer Schrift in Serbien
  • sr-Cyrl-RS - Serbisch mit kyrillischer Schrift in Serbien

Die benötigte Spezifitätsebene hängt von Ihrer Anwendung ab. Wenn Sie nur Text übersetzen, benötigen Sie möglicherweise nur Sprache und Region. Wenn Sie mit Sprachen arbeiten, die mehrere Schriftsysteme verwenden, benötigen Sie Schrift-Subtags.

Konventionen für die Groß- und Kleinschreibung bei Sprach-Tags

Sprach-Tags sind nicht case-sensitive. Die Tags en-US, EN-US, en-us und En-Us repräsentieren alle dieselbe Sprache. Es gibt jedoch konventionelle Großschreibungsmuster, die Tags lesbarer machen.

Sprach-Subtags verwenden konventionell Kleinbuchstaben. Schreiben Sie en, nicht EN oder En.

Schrift-Subtags verwenden konventionell die Großschreibung mit dem ersten Buchstaben in Großbuchstaben. Schreiben Sie Latn, nicht latn oder LATN.

Regions-Subtags verwenden konventionell Großbuchstaben. Schreiben Sie US, nicht us oder Us.

Die Befolgung dieser Konventionen macht Ihre Tags leichter lesbar und entspricht dem Format, das in Dokumentationen und Spezifikationen verwendet wird. Ihr Code sollte jedoch Sprach-Tags unabhängig von der Groß- und Kleinschreibung akzeptieren, da das Format offiziell nicht case-sensitive ist.

Parsen von Sprach-Tags mit JavaScript

JavaScript bietet den Intl.Locale-Konstruktor, um Sprach-Tags zu parsen und ihre Komponenten zu extrahieren. Dieser Konstruktor akzeptiert einen Sprach-Tag-String und gibt ein Objekt mit Eigenschaften für jeden Subtag zurück.

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

console.log(locale.language);
// Output: "en"

console.log(locale.region);
// Output: "US"

Das Intl.Locale-Objekt hat Eigenschaften für jede Komponente des Sprach-Tags. Diese Eigenschaften geben undefined zurück, wenn der entsprechende Subtag im ursprünglichen Tag nicht vorhanden ist.

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

console.log(simple.region);
// Output: undefined

Sie können Tags mit Skript-Subtags auf die gleiche Weise parsen.

const complex = new Intl.Locale("zh-Hans-CN");

console.log(complex.language);
// Output: "zh"

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

console.log(complex.region);
// Output: "CN"

Diese Parsing-Fähigkeit ist nützlich, wenn Sie Entscheidungen basierend auf bestimmten Komponenten eines Sprach-Tags treffen müssen. Beispielsweise möchten Sie möglicherweise verschiedene Schriftarten basierend auf dem Skript laden oder unterschiedliche Inhalte basierend auf der Region anzeigen.

Wann spezifische versus allgemeine Tags verwendet werden sollten

Die Wahl des richtigen Spezifitätsgrads für Sprach-Tags hängt davon ab, welche Aspekte von Sprache und Kultur Ihre Anwendung behandeln muss.

Verwenden Sie reine Sprach-Tags wie en oder fr, wenn Sie eine einzige Übersetzung haben, die für alle Sprecher dieser Sprache funktioniert. Dies ist üblich für Anwendungen mit begrenztem Lokalisierungsbudget oder Sprachen mit minimalen regionalen Unterschieden.

Verwenden Sie Sprach- und Regions-Tags wie en-US oder fr-CA, wenn Sie regionale Unterschiede in Vokabular, Rechtschreibung oder kulturellen Konventionen berücksichtigen müssen. Britisches Englisch und amerikanisches Englisch verwenden unterschiedliche Schreibweisen für viele Wörter. Kanadisches Französisch und europäisches Französisch haben unterschiedliches Vokabular und Ausdrücke.

Verwenden Sie Sprach-, Skript- und Regions-Tags wie zh-Hans-CN, wenn Sie mit Sprachen arbeiten, die mehrere Schriftsysteme verwenden. Chinesisch kann mit vereinfachten oder traditionellen Zeichen geschrieben werden. Serbisch kann mit lateinischen oder kyrillischen Alphabeten geschrieben werden. Der Skript-Subtag unterscheidet diese Varianten.

Extrahieren von Sprachcodes für Übersetzungsdateien

Viele Übersetzungssysteme organisieren Dateien nach Sprachcode. Sie können nur die Sprache und Region aus einem vollständigen Sprach-Tag extrahieren, um zu bestimmen, welche Übersetzungsdatei geladen werden soll.

const userLanguage = "zh-Hans-CN";
const locale = new Intl.Locale(userLanguage);

const translationKey = `${locale.language}-${locale.region}`;
console.log(translationKey);
// Output: "zh-CN"

Dieser Ansatz funktioniert auch, wenn das Sprach-Tag des Benutzers Komponenten enthält, die Sie für die Dateiauswahl nicht benötigen.

Einige Anwendungen verwenden nur den Sprachcode ohne die Region.

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

const translationKey = locale.language;
console.log(translationKey);
// Output: "fr"

Die Struktur, die Sie für Übersetzungsdateinamen wählen, sollte damit übereinstimmen, wie Sie Komponenten aus Sprach-Tags extrahieren.

Verwendung von Sprach-Tags mit der Intl-API

Die Intl-API akzeptiert Sprach-Tags direkt in allen ihren Konstruktoren. Sie müssen das Tag nicht selbst parsen, es sei denn, Sie müssen bestimmte Komponenten untersuchen.

const date = new Date("2025-03-15");

const usFormat = new Intl.DateTimeFormat("en-US").format(date);
console.log(usFormat);
// Output: "3/15/2025"

const gbFormat = new Intl.DateTimeFormat("en-GB").format(date);
console.log(gbFormat);
// Output: "15/03/2025"

Die Intl-API verwendet das Sprach-Tag, um zu bestimmen, welche Formatierungskonventionen angewendet werden sollen. Verschiedene Regionen formatieren Daten, Zahlen und Währungen unterschiedlich, auch wenn sie dieselbe Sprache sprechen.

Sie können das Sprach-Tag, das Sie vom Browser erhalten, direkt an Intl-Konstruktoren übergeben.

const userLanguage = navigator.language;
const formatter = new Intl.NumberFormat(userLanguage);

console.log(formatter.format(1234.5));
// Output variiert je nach Sprache
// Für "en-US": "1,234.5"
// Für "de-DE": "1.234,5"

Dies ist das häufigste Muster bei clientseitiger Internationalisierung. Erkennen Sie die Sprache des Benutzers und verwenden Sie dann dieses Sprach-Tag in Ihrer gesamten Anwendung, um Inhalte entsprechend zu formatieren.

Umgang mit ungültigen Sprach-Tags

Der Intl.Locale-Konstruktor wirft einen RangeError, wenn Sie ein ungültiges Sprach-Tag übergeben. Sie sollten diesen Fehler behandeln, wenn Sie mit Sprach-Tags aus nicht vertrauenswürdigen Quellen arbeiten.

try {
  const locale = new Intl.Locale("invalid-tag-format");
} catch (error) {
  console.log(error.name);
  // Output: "RangeError"

  console.log(error.message);
  // Output: "invalid language tag: invalid-tag-format"
}

Die meisten Sprach-Tags aus Browsern sind gültig, aber Benutzereingaben oder externe Datenquellen könnten fehlerhafte Tags enthalten. Wenn Sie den Konstruktor in eine Fehlerbehandlung einbetten, verhindern Sie, dass diese ungültigen Tags Ihre Anwendung zum Absturz bringen.