在Web前端开发场景中，多语言页面适配是常见需求，要实现对应用户语言的页面内容，首先需要获取用户的语言设置，而BOM也就是浏览器对象模型提供了对应的属性来完成这个操作。
BOM中获取语言设置的核心属性
BOM的navigator对象包含了浏览器的很多信息，其中和语言设置相关的属性主要有以下几个：
- navigator.language：返回当前浏览器的首选语言，通常是用户操作系统的语言设置，格式一般是语言代码加可选的地区代码，比如zh-CN表示简体中文中国地区。
- navigator.languages：返回一个数组，包含用户偏好语言的有序列表，数组的第一项是首选语言，后续项是用户的备用语言偏好，这个属性可以更全面地了解用户的语言选择。
- navigator.userLanguage：这是IE浏览器特有的属性，作用和
navigator.language类似，返回用户的操作系统语言设置，非IE浏览器一般不支持这个属性。
不同属性的使用差异
在实际使用时，需要注意不同属性的兼容性和返回值的区别：
navigator.language是现代浏览器都支持的标准属性，兼容性较好，适合大部分场景使用。navigator.languages是较新的标准属性，部分旧版本浏览器可能不支持，使用时需要做好兼容处理。- 如果需要兼容IE浏览器，可以额外判断
navigator.userLanguage属性，但它的返回值格式可能和navigator.language略有不同，比如可能返回小写的语言代码。
实际使用示例
下面是一个获取用户语言设置并根据语言适配页面内容的示例：
// 获取用户首选语言
function getPreferredLanguage() {
// 优先使用navigator.languages的第一个值
if (navigator.languages && navigator.languages.length > 0) {
return navigator.languages[0];
}
// 其次使用navigator.language
if (navigator.language) {
return navigator.language;
}
// 兼容IE浏览器
if (navigator.userLanguage) {
return navigator.userLanguage;
}
// 默认返回简体中文
return 'zh-CN';
}
// 根据语言切换页面内容
const userLang = getPreferredLanguage();
console.log('用户首选语言：' + userLang);
if (userLang.startsWith('zh')) {
document.title = '欢迎访问我的网站';
} else if (userLang.startsWith('en')) {
document.title = 'Welcome to my website';
} else {
document.title = 'Bienvenue sur mon site';
}
注意事项
- 获取到的语言代码是浏览器返回的结果，可能存在大小写不一致的情况，比如有的返回zh-CN，有的返回zh-cn，做判断时可以先统一转换为小写再处理。
- 用户可以在浏览器设置中修改偏好语言，所以获取到的语言设置是用户当前的浏览器配置，不是用户的实际地域，不要直接将语言设置和用户的地理位置绑定。
- 如果页面需要支持多语言，建议将获取到的语言作为初始语言，同时提供手动切换语言的功能，提升用户体验。