Skip to main content

How to Get the User's Locale in the Browser using JavaScript

When building internationalized applications, you need to know the user's preferred language to display content, dates, and numbers in the correct format. The browser's navigator object provides this information, but you need to know where to look to get it reliably across all browsers.

This guide will teach you the modern, standard method for getting the user's locale. You will learn the difference between navigator.languages and navigator.language and how to combine them into a single, robust function that works everywhere.

The navigator.languages property is the modern and most accurate way to determine a user's language preferences. It returns an array of strings representing the user's preferred languages, sorted in order of preference.

The logic: the first element in this array ([0]) is the user's primary and most preferred language.

Solution:

// The languages array is sorted by user preference.
console.log(navigator.languages); // Output: (e.g.) ["en-US", "en", "de"]

// The first element is the user's top choice.
const mostPreferredLocale = navigator.languages[0];
console.log(mostPreferredLocale); // Output: "en-US"
note

This property gives you the most detailed information about the user's settings.

The Legacy Fallback: navigator.language​

Before the languages array was introduced, browsers exposed a single navigator.language property. It returns a single string representing the primary language of the browser UI.

Solution:

console.log(navigator.language); // Output: (e.g.) "en-US"
note

While this property is widely supported, it doesn't provide the full list of fallback languages. The navigator.languages property is superior, but we still need navigator.language to provide a fallback for older browsers (like Internet Explorer).

The Robust Solution: A Reusable Function (Best Practice)​

The best practice is to create a single function that checks for the modern languages property first and then falls back to the legacy language property if necessary.

For example, we want a single, reliable way to get the user's most preferred locale that works in all browsers.

The Reusable Function:

/**
 * Gets the user's most preferred locale from the browser.
 * @returns {string} The BCP 47 language tag (e.g., "en-US").
 */
function getUserLocale() {
  // Check for the modern, multi-language property
  if (navigator.languages && navigator.languages.length > 0) {
    return navigator.languages[0];
  }
  // Fallback for older browsers
  return navigator.language || 'en-US'; // Default to 'en-US' if all else fails
}

How it works:

  1. It first checks if navigator.languages exists and is not an empty array. If so, it returns the first and most preferred locale.
  2. If that check fails, it returns navigator.language.
  3. If even that is not available, it provides a sensible default ('en-US').

A Concise Alternative (Ternary Operator):

const userLocale = (navigator.languages && navigator.languages.length)
  ? navigator.languages[0]
  : navigator.language;

Practical Use Case: Formatting a Date with the User's Locale​

The primary reason to get a user's locale is to use it with the Intl (Internationalization) API. This allows you to format dates, times, and numbers according to the user's own regional conventions.

Solution:

// Get the locale using our robust function
const locale = getUserLocale();
const today = new Date();

const options = {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
};

// Pass the locale to toLocaleDateString()
const formattedDate = today.toLocaleDateString(locale, options);

console.log(`Locale: ${locale}`);
console.log(`Formatted Date: ${formattedDate}`);
// Output in the US: "Thursday, October 16, 2025"
// Output in Germany: "27. Oktober 2025"

For example, the following output in it-IT is the equivalent of Thursday, October 16, 2025 in the en-US:

Locale: it-IT
Formatted Date: giovedì 16 ottobre 2025
note

This is the correct and modern way to perform localization in JavaScript.

Conclusion​

Getting a user's locale is a simple task if you follow the modern best practices.

  • The navigator.languages[0] property is the most accurate and preferred source for the user's primary language.
  • The navigator.language property should be used as a fallback for older browser compatibility.
  • The best approach is to create a single, robust function that checks for languages first and then falls back to language.
  • The primary use for the locale string is to pass it to the Intl API to format dates, numbers, and other data according to the user's conventions.

Table of Contents