Accept-Language多语言web应用

发表于

多语言web型应用即支持不同国家的用户使用时能够自动切换到local的语言，而不是访问时只能看到一种语言，比如我们常看到的一些英文网站，他们并不支持多语言。但也有少数做的非常精致的网站，或者说他们极度重视用户体验，是能够做到多语言的。

什么是Accept-Language

Accept-Language请求头允许客户端声明它可以理解的自然语言，以及优先选择的区域方言。

简而言之，就是浏览器在发起请求时会根据浏览器的版本(中文版|英文版)或浏览器语言设置等在header请求头中加上一个 Accept-Language 字段。server端取到这个字段后判断语言类型返回合适的内容。

语法

1
2
3
4
5
6
Accept-Language: <language>
Accept-Language: <locale>
Accept-Language: *

// Multiple types, weighted with the quality value syntax:
Accept-Language: fr-CH, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5

示例

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.8

cache-control: no-cache

上面的accept-language 指定了两种语言类型，zh-CN 和 en，代表中文和英文，且指定了语言权重，中文是0.9而英文是0.8。

其中多种语言之间用,隔开，;的前面为该种语言的简称，后面为其权重（优先级）。

服务端处理

langPackage/语言包

一般支持多语言的网站，其服务器都存储了多种语言包。当客户端向其请求时，服务器会查看请求头看一看客户端所愿意支持的语言，然后在自己的语言包中进行查找。

语言包示例

1
2
3
4
5
6
7
8
let langPack = {
  "zh":{
    title:'哈啰 世界!'
  }
  ,"en":{
    title:"hello world!"
  }
}

封装语言函数 getLang，解析Accept-Language

该方法能自动识别客户端愿意接收的语言类型，然后从服务器所储存的多种语言包中选择一种最合适的来返回数据。

首先需要对accept-language进行解析，将其解析成一个个对象。每个对象代表一种语言，它有两个属性：

  1. langType:语言的类型
  2. q:语言的权重:帮助我们筛选出客户端相对较喜欢的那一种语言

接着将每个对象放在一个数组中，按照权重从大到小排列。然后判断server端支持的语言类型，从权重从高到低去判断，返回服务端支持的优先级最高的结果。

根据 getLang 返回结果

当我们拿到语言类型后，只需要从对应的语言包中取到我们需要的变量翻译即可，然后输出到客户端。