Get user's preferred languages with JavaScript

Get user's preferred languages with JavaScript

Skip to solution

If you have different language settings in your website or application wouldn't it be great if you could automatically set the language the user prefers? Doing so may be easer than you think. All you have to do is use navigator.language or better, navigator.languages.

What's the difference between navigator.language and navigator.languages?

They're basically the same, except navigator.languages is newer and should return the whole list of user languages by order of preference. This is great in case you don't have a translation in their top language, but perhaps you do for a fallback.

Speaking of fallbacks since navigator.languages implementation is experimental at the time of writing, it is wise to use navigator.language as a fallback value. Just remember to wrap it in an Array for consistency.

Solution

  1. Using navigator.languages ([navigator.language] as fallback) we get the preferred language list
  2. The list is based on ISO 639-1 and may indicate country by the alpha 2 code of ISO 3166. You probably won't have separate localisations based on country. That is why we filter out unique language codes.
  3. Lastly we convert the language codes to more human-friendly english names of the languages.