js判断当前系统语言、浏览器语言

  当涉及到多语言国际化的项目时,首次加载页面时则需根据用户当前的系统语言或浏览器语言 进行相应的展示。
 一、navigator对象

  Navigator 对象包含有关浏览器的信息。根据MDN Navigator的介绍,Navigator参数可兼容各大浏览器。

  其中,navigator.language和navigator.languages 两个属性中 包含了浏览器的相关语言信息:

  js判断当前系统语言、浏览器语言

 

 

 我们一般采用language属性,如果是“zh-CN”,则代表当前的浏览器是中文的环境。

 注:navigator.language仅可代表浏览器语言,并不能代表当前系统语言.。

  有时会存在这种情况,在windows中的chrome或者Firefox浏览器在系统语言为英文的环境中,navigator.language仍旧是“zh-CN”,即通过js只能够获取浏览器的属性系统,而获取不到系统的语言类型。
验证:1、在chrome浏览器中设置语言环境,选择 使用英语显示界面,此时 英语自动被移动置为第一位语言 ,这时查看属性发现navigator.language获取到了第一个语言含有“en”字段的了。
  原因:

  js判断当前系统语言、浏览器语言

  综上可知:navigator.language 代表的不是浏览器的语言,而是用户更偏好的语言。

二、如何获取系统语言呢?

  国际化项目中一般都有一个 用户可以自行切换语言的按钮,当 用户的chrome语言设置为中文,而在使用的项目中 选择把页面切换为英语界面时,此时 如果想获取 语言 就需要 同时判断 浏览器语言和当前操作语言了。
  js判断当前系统语言、浏览器语言

 

 

   这时 一般会把项目当前语言存入 本地缓存或cookie中,下述代码为 如何从cookie中获取语言:

//获取cookie中的默认语言
export const getCookieLang = function() {
  let strcookie = document.cookie; //获取cookie字符串
  let arrcookie = strcookie.split(";"); //分割
  let cookieLang = "";
  for (let i = 0; i < arrcookie.length; i++) {
    let arr = arrcookie[i].split("=");
    //当cookie语言相关的键名为:org.springframework.web.servlet.i18n.CookieLocaleResolver.LOCALE
    if (
      arr &&
      arr[0].trim() ==
        "org.springframework.web.servlet.i18n.CookieLocaleResolver.LOCALE"
    ) {
      cookieLang = arr[1];
      break;
    }
  }
  return cookieLang;
};

获取浏览器语言:

// 获取浏览器默认语言
export const getBrowserLang = function() {
  let browserLang = navigator.language
    ? navigator.language
    : navigator.browserLanguage;
  let defaultBrowserLang = "";
  if (
    browserLang.toLowerCase() === "us" ||
    browserLang.toLowerCase() === "en" ||
    browserLang.toLowerCase() === "en_us"
  ) {
    defaultBrowserLang = "en_US";
  } else {
    defaultBrowserLang = "zh_CN";
  }
  return defaultBrowserLang;
};

此时,当前系统语言 通过 cookie存储的语言和浏览器语言同时判断:

// 获取当前系统语言(首先从cookie里获取,默认为浏览器当前的语言)
let cookieLang = getCookieLang();
cookieLang = cookieLang === "en" || cookieLang === "us" ? "en_US" : cookieLang;
const lang = cookieLang || getBrowserLang();
console.log(lang)        //这里的lang代表当前项目使用的语言

 

上一篇:(五十八):COCO-LM: Correcting and Contrasting Text Sequences for Language Model Pretraining


下一篇:Dubbo/HSF在Service Mesh下的思考和方案