浏览器语言检测方法及应用技巧

本文深入解析了如何安全、可靠地利用 `navigator.language` 和 `navigator.languages` 获取用户浏览器语言偏好，并强调其本质是操作系统级的语言快照（如 `"zh-CN"` 或 `"zh-Hans"`），而非网页当前语言；文章不仅涵盖基础用法和动态内容切换示例，更关键地揭示了常见误区——如不可直接用严格相等匹配、需统一转小写并采用 `startsWith()` 或主语言提取进行宽松判断，同时提供 IE 兼容降级方案（`navigator.userLanguage`）及重要提醒：该值无法实时响应系统修改、不可伪造，仅宜作为初始语言线索而非决策唯一依据，真正落地时务必结合用户手动选择等其他信号综合判断。

navigator.language 返回的是什么值

navigator.language 返回的是用户浏览器设置的首选语言（通常来自操作系统或浏览器语言偏好），格式为标准的 BCP 47 语言标签，比如 "zh-CN"、"en-US"、"ja"。它不一定是当前网页显示的语言，也不反映用户是否手动切换过页面语言——只是系统级设置的快照。

注意：该值在页面加载时就已确定，后续修改系统语言不会自动触发更新，需刷新页面才可能变化。

为什么有时拿到的是 zh-Hans 或 en-GB 而不是预期的 zh-CN

不同浏览器、不同系统对语言标签的标准化处理有差异：navigator.language 的值取决于操作系统语言设置 + 浏览器实现逻辑。例如：

• macOS 设置「简体中文」→ 可能返回 "zh-Hans"（而非 "zh-CN"）
• Windows 10/11 中文版 → 多数返回 "zh-CN"
• Chrome 和 Firefox 对区域子标签（如 -CN vs -Hans）的推导策略不同

这意味着不能直接用 === 粗暴匹配 "zh-CN" 来判断“是否中文”，而应做前缀判断或标准化处理。

如何安全地判断用户是否倾向中文或英文

推荐用 String.prototype.startsWith() 做宽松匹配，兼顾大小写和子标签变体：

const lang = navigator.language || navigator.userLanguage;
if (lang.toLowerCase().startsWith('zh') || lang.toLowerCase().startsWith('ja') || lang.toLowerCase().startsWith('ko')) {
  // 倾向东亚语言，可加载简体中文文案
} else if (lang.toLowerCase().startsWith('en')) {
  // 倾向英文
}

更稳妥的做法是提取主语言部分（用 lang.split('-')[0]），但要注意某些语言如 "pt-BR" 和 "pt-PT" 都属于 "pt"，语义上并不等价，需按业务权衡。

兼容性与降级方案：navigator.userLanguage 是啥

IE 浏览器不支持 navigator.language，但提供 navigator.userLanguage（仅 IE，返回如 "zh-cn"）。现代代码应优先用 navigator.language，fallback 到 navigator.userLanguage：

const lang = navigator.language || navigator.userLanguage || 'en-US';

注意：navigator.userLanguage 在 Edge（Chromium 版）中已被移除，且返回值全小写，无连字符标准化，使用时需统一转小写再处理。

真正容易被忽略的点是：这个值完全不可控、不可伪造（除非用户改系统设置），也不代表用户当前阅读习惯——比如一个装了英文系统但常年看中文内容的用户，navigator.language 仍会是 "en-US"。业务上建议把它当作初始语言线索，而非唯一依据。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《浏览器语言检测方法及应用技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。