Navigator.language — Eigenschaft · JavaScript-Referenz

Signatur

get Navigator.language

Beschreibung

Die schreibgeschützte Eigenschaft navigator.language liefert die bevorzugte Sprache des Benutzers. Das ist normalerweise die Sprache der Browser-Oberfläche bzw. der erste Eintrag der in den Browser-Einstellungen gewählten Sprachliste. Der Wert ist ein Sprach-Tag nach BCP 47, etwa "de", "de-DE", "en-US" oder "zh-Hant-TW".

Typische Einsatzfälle sind die clientseitige Auswahl einer Übersetzung, ein Standardwert für eine Sprachauswahl oder das Formatieren von Datums- und Zahlenwerten mit der Intl-API. Meist entspricht navigator.language dem ersten Eintrag von navigator.languages. Die vollständige, nach Priorität sortierte Liste bekommt man aber nur über navigator.languages, und die ist für eine robuste Sprachauswahl mit Rückfallsprachen besser geeignet.

Ändert der Benutzer die Spracheinstellung zur Laufzeit, feuert das languagechange-Ereignis auf window. Danach liefert die Eigenschaft den neuen Wert. Die Eigenschaft ist auch in Web Workers über WorkerNavigator.language verfügbar.

Rückgabewert

Typ

string

Beschreibung

Ein BCP-47-Sprach-Tag, das die bevorzugte Sprache angibt, z. B. "de-DE". In seltenen Fällen kann der Wert ein leerer String sein.

Beispiele

Bevorzugte Sprache auslesen

const lang = navigator.language;
console.log(`Bevorzugte Sprache: ${lang}`);

// Nur den Hauptteil der Sprache (ohne Region) ermitteln
const primary = new Intl.Locale(lang).language;
console.log(primary);

Bevorzugte Sprache: de-DE de

Passende Übersetzung mit Rückfallsprache wählen

const supported = ['de', 'en', 'fr'];

const pickLocale = () => {
  const candidates = navigator.languages?.length
    ? navigator.languages
    : [navigator.language];
  for (const tag of candidates) {
    const base = tag.toLowerCase().split('-')[0];
    if (supported.includes(base)) return base;
  }
  return 'en'; // Standard-Rückfall
};

document.documentElement.lang = pickLocale();
console.log(document.documentElement.lang);

de

Datum und Preis in der Benutzersprache formatieren

const locale = navigator.language;

const date = new Intl.DateTimeFormat(locale, { dateStyle: 'long' })
  .format(new Date(2024, 2, 15));
const price = new Intl.NumberFormat(locale, { style: 'currency', currency: 'EUR' })
  .format(1234.5);

console.log(date, '|', price);

15. März 2024 | 1.234,50 €

Auf Sprachänderungen reagieren

const updateUi = () => {
  console.log(`Neue Sprache: ${navigator.language}`);
};

window.addEventListener('languagechange', updateUi);

// Später wieder abmelden
// window.removeEventListener('languagechange', updateUi);

Neue Sprache: en-US

// Wichtig · Fallstricke

Groß-/Kleinschreibung: Ältere Browser (z. B. alte Safari-Versionen) haben Tags teilweise kleingeschrieben geliefert ("de-de"). Vergleichen Sie Tags darum ohne Rücksicht auf Groß-/Kleinschreibung oder normalisieren Sie sie mit Intl.getCanonicalLocales().
Nicht identisch mit dem Accept-Language-Header: Der Server sieht die komplette gewichtete Liste. Für serverseitige Inhaltsaushandlung ist der Header die bessere Quelle.
Keine Garantie: Der Wert spiegelt die Browser-Einstellung wider, nicht unbedingt die tatsächliche Sprache des Benutzers. Bieten Sie immer eine manuelle Sprachauswahl an und speichern Sie die Wahl, z. B. in localStorage.
Datenschutz: Die Sprache ist ein Merkmal für Browser-Fingerprinting. Datenschutzorientierte Browser (z. B. Firefox mit privacy.resistFingerprinting, Tor Browser) liefern deshalb teils einen vereinheitlichten Wert wie "en-US".
Der Internet Explorer kannte nur die nicht standardisierten Eigenschaften navigator.userLanguage und browserLanguage. Alle modernen Browser unterstützen navigator.language.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird stillschweigend ignoriert.

Siehe auch

Navigator.languages Intl.Locale Intl.DateTimeFormat Intl.NumberFormat Navigator NavigateEvent.hashChange