JS获取系统语言、浏览器语言navigator.language和navigator.languages

对于一些技术小伙伴来说，有的时候会遇见国际化的需求。这个时候就得知道用户到底用的是什么样的系统语言了（用户第一次打开你的网站的时候，需要知道该用户用的系统语言亦或是浏览器的语言）。在web端应该如果获取我们需要的参数呢？

一、navigator

Navigator 对象包含有关浏览器的信息。根据MDN的统计，Navigator参数在各大浏览器都是被支持的，如下图：

所以，我们可以大胆的在每个浏览器使用。

而关乎系统或者是浏览器语言的属性，就是navigator.language和navigator.languages两个字段了。如下图：

而我们一般来说采取的就是language，如果现实的是“zh-CN”，表示当前的系统/浏览器是中文的环境。

本来，这是一个非常容易的需求，但是，公司的测试发现在windows中的chrome或者Firefox浏览器在系统语言为英文的环境中，navigator.language仍旧是“zh-CN”。这其实不难理解，说明JS还真的是取不到系统的语言类型，只能够获取浏览器的属性系统。IE和opera在几年前是navigator.browerLanguage来获取浏览器的语言，并且通过navigator.systemLanguage获取系统（计算机）语言。但是，后来全部浏览器都用navigator存储浏览器的信息，而ie等浏览器也不能够通过参数获取系统语言了。所以，这里需要说明的是，JS不能够获取系统语言的。

二、浏览器设置成为了英文，但是仍展示中文？

我构建了一个虚拟机，虚拟机是windows环境并且是专业版的，计算机的语言我先设置成了英文的，但是，我打开chrome等浏览器，navigator.language仍旧没有我要扥“en”类型的，而且，navigator.languages是一个数组，数组里边居然也不包含“en”类型的字段，这就神奇了。不管是重启电脑还是重启虚拟机，都无事于补。再后来，我设置了语言为英文，仍旧是展示中文的。这就纳闷了。

但是这里疏忽了一点，就是没有去chrome浏览器设置里边设置，语言环境，如下图设置：

添加完成如下，

这个时候，如果重启浏览器仍旧navigator.language还是获取不到包含“en”的，因为需要在设置里边的语言项目中将英文拖到第一位。

这样navigator.language就是获取到了第一个语言含有“en”字段的了。

三、为什么这么神奇呢？

以上截图是MDN的官方说法，也就是说即使你的浏览器设置了英文，也是没有用的，需要将该语言移动到所有语言的前边。

navigator.language 代表的不是浏览器的语言，而是用户更喜欢的语言，这才是最正确的说法。

不过，国际化最好有一个可以切换的按钮，需要用户主动选择，这样可以保证用户用什么类型的语言，一劳永逸了。