So erkennen Sie die bevorzugte Sprache des Benutzers im Browser

Einführung

Wenn jemand Ihre Web-App besucht, weiß der Browser bereits, welche Sprachen bevorzugt werden. Diese Information stammt 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 übersetzten Text anzeigen können, müssen Sie wissen, welche Sprache der Benutzer wünscht.

Wie Browser Spracheinstellungen speichern

Jeder moderne Browser verwaltet eine Liste bevorzugter Sprachen. Benutzer konfigurieren diese Einstellungen in ihren Browser- oder Betriebssystemeinstellungen. Beispielsweise könnte jemand Spanisch als erste Wahl festlegen, mit Englisch als Fallback.

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 Entscheidungen darüber zu treffen, welche Sprache angezeigt werden soll.

Spracheinstellungen mit JavaScript auslesen

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

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

Die Sprachen sind nach Präferenz geordnet, wobei die bevorzugteste Sprache zuerst kommt. In diesem Beispiel bevorzugt der Benutzer mexikanisches Spanisch, gefolgt von allgemeinem Spanisch, dann US-Englisch und dann allgemeinem Englisch.

Verstehen, was der Browser zurückgibt

Jede Sprache wird mithilfe eines Sprach-Tags 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 darstellt, die der Benutzer lesen kann, in der Reihenfolge seiner Präferenz.

Die am meisten bevorzugte Sprache abrufen

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

const topLanguage = navigator.language;
console.log(topLanguage);
// Output: "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 App mehrere Optionen zur Auswahl.

Betrachten Sie einen Benutzer, der Französisch und Englisch spricht. Wenn Ihre App Französisch unterstützt, zeigen Sie Inhalte auf Französisch an. Wenn 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"];

// Find the first language the app supports
const selectedLanguage = languages.find(lang => 
  supportedLanguages.includes(lang)
);

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

Dieser Code findet die erste Übereinstimmung zwischen den Präferenzen des Benutzers und den von Ihrer App unterstützten Sprachen.

Sprachpräferenzen zur Formatierung von Inhalten verwenden

Sobald Sie die bevorzugte Sprache des Benutzers kennen, können Sie diese mit der Intl-API verwenden, um Daten, 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);
// Output varies by language
// For "en-US": "3/15/2025"
// For "en-GB": "15/03/2025"
// For "ja-JP": "2025/3/15"

Das Array der 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 ermöglicht es der Intl-API, die Fallback-Logik für Sie zu handhaben.

Wenn sich Spracheinstellungen ändern

Wenn sich die bevorzugten Sprachen des Benutzers ändern, wird ein languagechange-Ereignis auf dem Window-Objekt ausgelöst. Sie können auf dieses Ereignis lauschen, um die Sprache Ihrer App 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 Ereignis ist in der Praxis ungewöhnlich. Die meisten Benutzer ändern ihre Browser-Spracheinstellungen nicht während des Browsens. Das Lauschen darauf bietet jedoch eine bessere Benutzererfahrung, wenn es doch passiert.