Detect browser language in JavaScript

• Take a deep look on navigator
  • navigator.languages
    • Behavior in Chrome
  • navigator.language
    • Behavior in Chrome
    • Behavior in IE11
  • navigator.userLanguage
  • navigator.browserLanguage
  • navigator.systemLanguage
• Examples
• Real-life scripts
• More ways on detecting user language

To detect a user's preferred language, we may refer to several properties on navigator. Some are supported only in latest browsers, while some are proprietary and IE only.

Take a deep look on navigator

Currently we have the following properties available to us:

Compatibility table made with the data on Mozilla Developer Network.

Number indicates the browser version from which support is built in, 'Yes' means supported, and 'x' means not supported.

navigator.languages

languages is a property described in the interface NavigatorLanguage, and implemented by Navigator and WorkerNavigator. Thus available as navigator.languages.

The NavigatorLanguage.languages read-only property returns an array of DOMStrings representing the user's preferred languages. The language is described using BCP 47 language tags. In the returned array they are ordered by preference with the most preferred language first.

Quoted from NavigatorLanguage.languages - Web APIs | MDN

Behavior in Chrome

navigator.languages corresponds to the language list in Settings - Languages in Chrome.

navigator.language

language is the other property described in NavigatorLanguage interface, along with languages, which is available as navigator.language. This property has much wider browser support than navigator.languages. All current browsers and IE >= 11 support this.

The NavigatorLanguage.language read-only property returns a string representing the preferred language of the user, usually the language of the browser UI.

Quoted from NavigatorLanguage.language - Web APIs | MDN

Behavior in Chrome

navigator.language corresponds to the language marked as "Google Chrome is displayed in this language" in Settings - Languages in Chrome.

Note the value of navigator.language is not necessarily the first element of the array returned by navigator.languages.

Behavior in IE11

navigator.language is the same as navigator.userLanguage for IE.

See navigator.userLanguage for details.

navigator.userLanguage

Retrieves the operating system's natural language setting.

This property reflects the setting in the "Your locale (location)" box in the Regional Options of Control Panel—for example, "English (United States).

Quoted from userLanguage property (Internet Explorer)

In Windows 10 with IE 11, this setting reflects your language preferences. And can be reached in UI as the following images show.

The output in console looks like this:

Note this property changes on the fly when settings in language preferences change.

Note only the first language with language pack installed will be used.

navigator.browserLanguage

Retrieves the current operating system language.

Note This property does not indicate the language or languages set by the user in Language Preferences, located in the Internet Options dialog box. (That's navigator.userLanguage.)

Quoted from browserLanguage property (Internet Explorer)

The attached article above has a comprehensive explanation on this browserLanguage.

Basically, browserLanguage does not reflect the language of the browser nowadays, it reflects the language of the OS instead. It's the time prior to IE 5 that browserLanguage is the language of the browser.

navigator.systemLanguage

Retrieves the default language used by the operating system.

The systemLanguage property reflects the language edition of the installed operating system.

Quoted from systemLanguage property (Internet Explorer)

From my test result, navigator.systemLanguage actually refers to Language for non-Unicode programs.

Note all of navigator.userLanguage, navigator.browserLanguage, and navigator.systemLanguage is only supported in IE, not including Edge.

Examples

var language = navigator.languages && navigator.languages[0] ||
               navigator.language ||
               navigator.userLanguage;

Code above prefers the first language in user's language list if this list is available, or uses language; for IE browsers lower than version 11, uses userLanguage.

Real-life scripts

• i18next-browser-languageDetector
  • navigator.js

More ways on detecting user language

• Parse the Accept-Language header
• IP address lookup (not really language detection, but geolocation)