怎么利用HTML的navigator.language获取用户浏览器的首选语言设置-html教程-PHP中文网

navigator.language返回浏览器ui语言的bcp 47标签（如"zh-cn"、"en-us"），不能直接当语言代码使用，需转小写、提取主语言码（如"zh"）并校验有效性后方可安全匹配翻译资源。

怎么利用html的navigator.language获取用户浏览器的首选语言设置

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() 做宽松匹配，兼顾大小写和子标签变体：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

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"。业务上建议把它当作初始语言线索，而非唯一依据。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！