JavaScript Navigator language Property

What You’ll Learn

navigator.language returns the user’s preferred BCP 47 language tag (usually the browser UI language). Learn the string format, Intl formatting, how it relates to navigator.languages, five examples, and try-it labs.

Introduction

Websites often want to greet users in their language, format dates the way they expect, and pick a sensible default locale. You do not need to guess — the browser already knows a preferred language.

navigator.language is read-only and returns that preference as a string, usually matching the browser UI language. Tags look like en, en-US, or fr-FR (BCP 47).

Understanding the language Property

Think of it as “which language does this browser say the user prefers first?”

• BCP 47 tag — language, optional region (e.g. en-US).
• Usually UI language — MDN: typically the language of the browser UI.
• Single string — for the full preference list, see navigator.languages.
• Intl-ready — pass the tag to Intl.DateTimeFormat, NumberFormat, etc.
• Baseline — Widely available (MDN, since about July 2015).

📝 Syntax

General form of the property:

navigator.language

Value

• A string: BCP 47 language tag (e.g. en, en-US, fr-FR, es-ES).

Common patterns

// Read preferred language:
console.log(navigator.language);

// MDN-style Intl formatting:
const date = new Date("2012-05-24");
const formattedDate = new Intl.DateTimeFormat(navigator.language).format(date);

// Primary language subtag only:
const primary = navigator.language.split("-")[0]; // e.g. "en" from "en-US"

Examples Gallery

Examples follow MDN navigator.language patterns, including Intl formatting. Prefer Try It Yourself to see your browser’s preferred tag.

console.log(navigator.language);
console.log("type: " + typeof navigator.language);

en-US
type: string
(your tag will vary — en, en-GB, fr-FR, …)

const tag = navigator.language;
const primary = tag.split("-")[0].toLowerCase();
console.log("tag: " + tag);
console.log("primary: " + primary);

tag: en-US
primary: en

const date = new Date("2012-05-24");
const formattedDate = new Intl.DateTimeFormat(navigator.language).format(date);
console.log(formattedDate);

5/24/2012
(format varies by locale — e.g. 24/05/2012)

function pickLocale(supported, fallback) {
  const tag = (navigator.language || fallback).toLowerCase();
  const primary = tag.split("-")[0];
  if (supported.includes(tag)) return tag;
  if (supported.includes(primary)) return primary;
  return fallback;
}

console.log(pickLocale(["en", "en-us", "fr", "es"], "en"));

en
(or en-us / fr / es depending on your browser and supported list)

function languageInfo() {
  const tag = navigator.language;
  return {
    language: tag,
    primary: tag.split("-")[0],
    sampleDate: new Intl.DateTimeFormat(tag).format(new Date("2012-05-24")),
    advice: "Use as default locale; still offer a language switcher"
  };
}

console.log(JSON.stringify(languageInfo()));

{"language":"en-US","primary":"en","sampleDate":"5/24/2012","advice":"Use as default locale; still offer a language switcher"}

🚀 Common Use Cases

• Default UI locale — load the closest translation pack on first visit.
• Date / number formatting — feed Intl constructors the user’s tag.
• Content negotiation — hint which localized blog or help docs to show.
• Analytics — understand preferred languages (without over-fingerprinting).
• Forms — pre-select a language dropdown value.

📝 Notes

• Baseline Widely available (MDN, since about July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Value is a BCP 47 language tag string.
• Old Safari on iOS (before 10.2) used lowercase region codes (en-us).
• Related: languages, keyboard, JavaScript hub.

💡 Best Practices