页面能不能使用用户浏览器设置的语言作为默认语言？

[yaofly2012]

背景

某天正在奋力coding的时候，忽然收到领导发来的一个小窗。咦？难道要给我加工资？

咱们页面能不能使用用户浏览器设置的语言作为默认语言？

额，原来是加需求。

实现

1. Navigator.language

一开始的思路是先想办法在前端获取到用户浏览器设置的语言，所有就google：js get browser language，接着就发现了navigator.language属性。看了解释貌似能实现领导需求。
但是仔细想了下貌似有点问题，首先页面是SSR渲染的，SSR渲染时并不能获取到浏览器的语言设置呀。

2. HTTP Accept-Language首部

The Accept-Language request HTTP header indicates the natural language and locale that the client prefers

看解释这个才是解决方案，可以在服务端获取客户端的语言设置。

2.1 浏览器语言设置和Accept-Language关系：

以我的Chrome浏览器为例：

可以看到我设置了3中语言，其中英文为首选语言。再看下请求的Accept-Language首部值：

更新下浏览器语言设置，会发现Accept-Language首部也更新调整，即两者是一致的：

2.2 Accept-Language值

Accept-Language: en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7

多个语言用逗号隔开，每个非首选的语言后面可能会被;q=xx修饰，即权重值，权重从左到右权重逐渐递减。
总结就是Accept-Language值是一个被权重标记的有序字符串。

参考

1. MDN Navigator.language
2. MDN Accept-Language
3. stackoverflow How to determine user's locale within browser?