多语言web型应用即支持不同国家的用户使用时能够自动切换到local的语言,而不是访问时只能看到一种语言,比如我们常看到的一些英文网站,他们并不支持多语言。但也有少数做的非常精致的网站,或者说他们极度重视用户体验,是能够做到多语言的。
什么是Accept-Language
Accept-Language请求头允许客户端声明它可以理解的自然语言,以及优先选择的区域方言。
简而言之,就是浏览器在发起请求时会根据浏览器的版本(中文版|英文版)或浏览器语言设置等在header请求头中加上一个 Accept-Language 字段。server端取到这个字段后判断语言类型返回合适的内容。
语法
1 | Accept-Language: <language> |
示例
accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8
accept-encoding: gzip, deflate, br
accept-language: zh-CN,zh;q=0.9,en;q=0.8cache-control: no-cache
上面的accept-language 指定了两种语言类型,zh-CN 和 en,代表中文和英文,且指定了语言权重,中文是0.9而英文是0.8。
其中多种语言之间用,隔开,;的前面为该种语言的简称,后面为其权重(优先级)。
服务端处理
langPackage/语言包
一般支持多语言的网站,其服务器都存储了多种语言包。当客户端向其请求时,服务器会查看请求头看一看客户端所愿意支持的语言,然后在自己的语言包中进行查找。
语言包示例
1 | let langPack = { |
封装语言函数 getLang,解析Accept-Language
该方法能自动识别客户端愿意接收的语言类型,然后从服务器所储存的多种语言包中选择一种最合适的来返回数据。
首先需要对accept-language进行解析,将其解析成一个个对象。每个对象代表一种语言,它有两个属性:
- langType:语言的类型
- q:语言的权重:帮助我们筛选出客户端相对较喜欢的那一种语言
接着将每个对象放在一个数组中,按照权重从大到小排列。然后判断server端支持的语言类型,从权重从高到低去判断,返回服务端支持的优先级最高的结果。
根据 getLang 返回结果
当我们拿到语言类型后,只需要从对应的语言包中取到我们需要的变量翻译即可,然后输出到客户端。