如何通过 navigator.language 自动识别用户首选语言并静默挂载对应的国际化 I18n 翻译包

顺亿

2026-09-22 • 👁 3人浏览过

必须归一化 navigator.language：转小写、取主语言码、过滤无效值；应在中首个同步脚本执行，避免闪动；优先用 navigator.languages[0] 降级处理；SSR 需用 Accept-Language 头；简繁需按 ["zh-CN","zh-Hans","zh"] 顺序匹配。直接读

navigator.language

会匹配失败？先做归一化浏览器返回的

navigator.language

值不规范：可能是

"zh-CN"

、

"zh-tw"

、

"en-us"

，甚至旧版 Safari 返回全小写，IE 可能 fallback 到

navigator.userLanguage

。直接拿它当 key 去查

messages[lang]

几乎必挂。必须提前归一化：统一转小写：

lang = (navigator.language || navigator.userLanguage || 'en').toLowerCase()

取主语言码：

const baseLang = lang.split('-')[0]

（得到

"zh"

、

"en"

、

"fr"

）过滤无效值：

if (!baseLang || baseLang === 'und' || baseLang.length !== 2) baseLang = 'en'

为什么不能等

window.onload

或框架初始化后再读？ DOM 渲染后才挂载翻译，会导致文本闪动：先显示英文（或占位符），再刷成中文。用户感知明显，尤其在慢网或低端设备上。正确时机是 HTML 的

中第一个非

async

defer

的