Wie man die bevorzugte Sprache des Nutzers im Browser erkennt

Einführung

Wenn jemand Ihre Web-App besucht, kennt sein Browser bereits die bevorzugten Sprachen. Diese Informationen stammen aus den Einstellungen des Betriebssystems und des Browsers. Durch das Auslesen dieser Spracheinstellungen können Sie Inhalte in der richtigen Sprache anzeigen, ohne dass der Benutzer manuell eine Sprache auswählen muss.

Dies ist die Grundlage der clientseitigen Internationalisierung. Bevor Sie Datumsangaben, Zahlen formatieren oder übersetzte Texte anzeigen können, müssen Sie wissen, welche Sprache der Benutzer bevorzugt.

Wie Browser Spracheinstellungen speichern

Jeder moderne Browser verwaltet eine Liste bevorzugter Sprachen. Benutzer konfigurieren diese Einstellungen in ihrem Browser oder in den Betriebssystemeinstellungen. Beispielsweise könnte jemand Spanisch als erste Wahl und Englisch als Alternative festlegen.

Der Browser verwendet diese Einstellungen, um Webseiten in der entsprechenden Sprache anzufordern. Wenn Ihr JavaScript-Code ausgeführt wird, kann er dieselben Einstellungen auslesen, um zu entscheiden, welche Sprache angezeigt werden soll.

Spracheinstellungen mit JavaScript auslesen

Die Eigenschaft navigator.languages gibt ein Array von Strings zurück, die die bevorzugten Sprachen des Benutzers repräsentieren. Dies ist die primäre Methode, um Spracheinstellungen in JavaScript zu erkennen.

const languages = navigator.languages;
console.log(languages);
// Ausgabe: ["es-MX", "es", "en-US", "en"]

Die Sprachen sind nach Präferenz geordnet, wobei die bevorzugte Sprache an erster Stelle steht. In diesem Beispiel bevorzugt der Benutzer mexikanisches Spanisch, gefolgt von allgemeinem Spanisch, dann US-Englisch und schließlich allgemeinem Englisch.

Verstehen, was der Browser zurückgibt

Jede Sprache wird mit einem Sprach-Tag gemäß BCP 47 beschrieben. Diese Tags können einfach sein wie en für Englisch oder spezifischer wie en-US für US-Englisch oder zh-CN für Chinesisch, wie es in China verwendet wird.

Das genaue Format und die Bedeutung dieser Tags werden in der nächsten Lektion behandelt. Verstehen Sie vorerst, dass jeder String im Array eine Sprache repräsentiert, die der Benutzer lesen kann, in der Reihenfolge der Präferenz.

Die bevorzugte Hauptsprache abrufen

Die Eigenschaft navigator.language ist das erste Element des Arrays navigator.languages. Wenn Sie nur die bevorzugte Hauptsprache des Benutzers benötigen, können Sie diese Eigenschaft direkt verwenden.

const topLanguage = navigator.language;
console.log(topLanguage);
// Ausgabe: "es-MX"

Beide Ansätze sind gültig. Verwenden Sie navigator.language, wenn Sie nur eine Sprache benötigen, und verwenden Sie navigator.languages, wenn Sie mehrere Fallback-Optionen berücksichtigen möchten.

Warum der Browser mehrere Sprachen bereitstellt

Benutzer sprechen oft mehrere Sprachen mit unterschiedlichen Kenntnisstufen. Der Browser ermöglicht es ihnen, mehrere Sprachen in der Reihenfolge ihrer Präferenz anzugeben. Dies gibt Ihrer Anwendung mehrere Auswahlmöglichkeiten.

Betrachten Sie einen Benutzer, der Französisch und Englisch spricht. Wenn Ihre App Französisch unterstützt, zeigen Sie Inhalte auf Französisch an. Falls nicht, greifen Sie auf Englisch zurück. Wenn Ihre App nur eine Sprachpräferenz unterstützen würde, hätten Sie keine Fallback-Option.

const languages = navigator.languages;
// ["fr-CA", "fr", "en-US", "en"]

const supportedLanguages = ["en", "es", "de"];

// Die erste Sprache finden, die die App unterstützt
const selectedLanguage = languages.find(lang => 
  supportedLanguages.includes(lang)
);

console.log(selectedLanguage);
// Ausgabe: "en"

Dieser Code findet die erste Übereinstimmung zwischen den Präferenzen des Benutzers und den Sprachen, die Ihre App unterstützt.

Verwendung von Sprachpräferenzen zur Formatierung von Inhalten

Sobald Sie die bevorzugte Sprache des Benutzers kennen, können Sie sie mit der Intl-API verwenden, um Datumsangaben, Zahlen und andere Inhalte gemäß den Konventionen dieser Sprache zu formatieren.

const userLanguage = navigator.language;

const date = new Date("2025-03-15");
const formattedDate = new Intl.DateTimeFormat(userLanguage).format(date);

console.log(formattedDate);
// Ausgabe variiert je nach Sprache
// Für "en-US": "3/15/2025"
// Für "en-GB": "15/03/2025"
// Für "ja-JP": "2025/3/15"

Das Array von Sprachkennungen aus navigator.languages kann direkt an Intl-Konstruktoren übergeben werden, um eine präferenzbasierte Fallback-Auswahl zu implementieren. Die Intl-API verwendet automatisch die erste Sprache aus der Liste, die sie unterstützt.

const formattedDate = new Intl.DateTimeFormat(navigator.languages).format(date);

Dieser Ansatz überlässt der Intl-API die Handhabung der Fallback-Logik.

Wenn sich Spracheinstellungen ändern

Wenn sich die bevorzugten Sprachen des Nutzers ändern, wird ein languagechange-Event am Window-Objekt ausgelöst. Sie können auf dieses Event hören, um die Sprache Ihrer Anwendung in Echtzeit zu aktualisieren.

window.addEventListener("languagechange", () => {
  const newLanguage = navigator.language;
  console.log("Language changed to:", newLanguage);
  // Update your app's displayed language here
});

Dieses Event ist in der Praxis selten. Die meisten Nutzer ändern ihre Browser-Spracheinstellungen nicht während des Surfens. Das Abhören dieses Events bietet jedoch eine bessere Nutzererfahrung, wenn es doch vorkommt.