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
- Using
navigator.languages
([navigator.language]
as fallback) we get the preferred language list - 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.
- Lastly we convert the language codes to more human-friendly english names of the languages.