场景

在网站进行国际化的过程中，经常会遇到语言的问题。那么如何确定需要给用户默认展示什么语言呢？

有些站点会使用不同的顶级域名来区分不同的国家级地区访问，比如.cn是中国的顶级域名，co.jp通常是日本网站会注册的域名。或者是通过不同的路径来区分，比如苹果的这个地址，代表的是https://www.apple.com/mo/中国澳门区域，默认会展示繁体文字，当然还有等等的其它方法。

本文将会介绍通过浏览器中的language属性来获取当前浏览器的语言类型，从而确定当前需要给用户默认展示的语言。

介绍

navigator.language是一个只读字段，通常会返回当前用户浏览器操作界面的语言。

比如你在控制台输入navigator.language，将会得到下面的内容：

浏览器返回的zh-CN就是现在浏览器中使用的语言类型。当然这个字符串也不是随便返回的，它会遵从BCP 47规范。

通俗点来说，浏览器最常见的返回是语言-地区的一个组合

在上面的返回结果中zh代表的是中文，CN代表的是中国地区。

如果美国人查看该字段大概率会得到en-US的结果，en代表的是英语，US代表的是美国。

如果加拿大人查看该字段大概率会得到en-CA的结果，同样en代表的是英语，CA代表的是加拿大。

因此你可以很轻易的根据返回的结果，设置当前需要给用户展示的语言类型。

在浏览器中还有一个事件叫做languagechange，当用户改变语言时，将会触发该事件（这是一个实验中的特性，浏览器的支持详见👉🏻Window API: languagechange event），基本上主流的桌面级浏览器及高版本系统的手机浏览器都广泛支持了该事件。

在React和Vue中的应用

基于react封装一个useNavigatorLanguage钩子

可以看到，使用该特性需要以下三步

• 检测浏览器是否支持navigator.language属性
• 获取当前浏览器语音类型
• 监听用户更改浏览器语言

为了使用方便，可以将该功能封装进react hooks中，具体代码如下：

export const useNavigatorLanguage = (): Readonly<NavigatorLanguageState> => {
  // 获取navigator
  const navigator = window?.navigator;

  // 查看当前浏览器是否支持language
  const isSupported = Boolean(navigator && 'language' in navigator);

  // 存储当前language
  const [language, setLanguage] = useState(navigator?.language);

  // 监听languagechange事件，如果有变化，就更新存储的language值
  useEventListener(window, 'languagechange', () => {
    if (navigator) {
      setLanguage(navigator.language);
    }
  });

  return {
    isSupported,
    language,
  };
};

在上面的代码中，已经为使用者提供了上述三种的使用场景，如果根据isSupported字段获取到当前环境并不支持，那么可以更换别的方案。

同样你也无需关心用户改变语言的事件，language将会实时返回当前浏览器的首选语言项。

基于vue的useNavigatorLanguage

由于有稳定可靠的开源库实现，在这里就不介绍相关代码的编写了，有兴趣的同学请点击该链接👉🏻查看Vueuse库中的相关实现

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 12 天，点击查看活动详情