JavaScript: Get the user’s preferred language

This concise, straightforward article shows you how to detect the user’s preferred language in their web browser by using the built-in features of modern JavaScript.

What is the Point?

The navigator.language, navigator.languages, and navigator.userLanguage properties can be used to get the primary language of the user or the browser. They are part of the Navigator interface, which represents the state and identity of the user agent (browser). Below are the details about each one:

• navigator.language returns the preferred language of the user’s browser, represented as a string in the format “language” or “language-country” (e.g., “en” or “en-US”). It is well-supported in modern browsers, including Chrome, Firefox, Safari, and Edge.
• navigator.languages returns an array of the user’s preferred languages, ordered by priority. The first element in the array is the user’s primary language choice, and subsequent elements are fallback languages. This property is introduced in ECMAScript Internationalization API and is supported by modern browsers. It provides more detailed language information compared to navigator.language. Example output: ["en-US", "en", "fr"].
• navigator.userLanguage is specific to Internet Explorer and older versions of Microsoft Edge (prior to EdgeHTML 79). It is a legacy property used to retrieve the user’s preferred language in IE. It returns the preferred language as a string in the format “language-country” (e.g., “en-US”). In modern browsers, this property is not supported, and attempting to access it will result in undefined.

Example

In this example, we’ll write a function that can retrieve the user’s preferred language regardless of the browser they are using, ensuring compatibility with both modern browsers and older versions of IE:

function getUserPreferredLanguage() {
  // Modern browsers support navigator.language
  if (navigator.language) {
    return navigator.language;
  }

  // For IE and older versions of Microsoft Edge, use navigator.userLanguage
  if (navigator.userLanguage) {
    return navigator.userLanguage;
  }

  // If none of the above is available, use a default language code
  return 'en';
}

// try it out
console.log(getUserPreferredLanguage());

In this function, we first check if navigator.language is available in the browser. If it is, we return the value directly. Otherwise, we check for navigator.userLanguage, which is specific to IE and older Edge versions.

If neither of these properties is available (for some very old or non-standard browsers), the function will return a default language code (‘en’ in this case). You can adjust the default language code based on your application’s requirements.

My output (yours might be different from mine):

en-US

Conclusion

You’ve learned how to programmatically know the language preference of a user. This knowledge can help your website or web app to provide a better user experience and reach a wider audience. If you find something wrong or outdated, please inform me by leaving a comment. Happy coding & have a beautiful day!