当涉及到多语言国际化的项目时,首次加载页面时则需根据用户当前的系统语言或浏览器语言 进行相应的展示。
一、navigator对象
Navigator 对象包含有关浏览器的信息。根据MDN Navigator的介绍,Navigator参数可兼容各大浏览器。
其中,navigator.language和navigator.languages 两个属性中 包含了浏览器的相关语言信息:
我们一般采用language属性,如果是“zh-CN”,则代表当前的浏览器是中文的环境。
注:navigator.language仅可代表浏览器语言,并不能代表当前系统语言.。
有时会存在这种情况,在windows中的chrome或者Firefox浏览器在系统语言为英文的环境中,navigator.language仍旧是“zh-CN”,即通过js只能够获取浏览器的属性系统,而获取不到系统的语言类型。
验证:1、在chrome浏览器中设置语言环境,选择 使用英语显示界面,此时 英语自动被移动置为第一位语言 ,这时查看属性发现navigator.language获取到了第一个语言含有“en”字段的了。
原因:
综上可知:navigator.language 代表的不是浏览器的语言,而是用户更偏好的语言。
二、如何获取系统语言呢?
国际化项目中一般都有一个 用户可以自行切换语言的按钮,当 用户的chrome语言设置为中文,而在使用的项目中 选择把页面切换为英语界面时,此时 如果想获取 语言 就需要 同时判断 浏览器语言和当前操作语言了。
这时 一般会把项目当前语言存入 本地缓存或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代表当前项目使用的语言