核心是用 data-i18n 属性标记可翻译元素，结合 locales 对象动态更新文本/属性值，语言存 localStorage 并同步 html lang 属性，支持属性翻译（如 placeholder）、资源路径切换及降级处理。

怎么用 javaScript 动态切换 HTML 页面语言

核心是把不同语言的文本内容抽离成 jsON 或 JS 对象，再根据用户选择实时替换 dom 中的文案。不推荐用多个 HTML 文件来回跳转，维护成本高、seo 差、体验卡顿。

常见错误是直接 innerHTML 整页重写，导致事件监听丢失、表单状态清空、焦点错乱。正确做法是只更新带 data-i18n 属性的元素文本或属性值。

• 准备两套文案对象，比如 locales.zh 和 locales.en，键名统一（如 "header.title"）
• 页面加载后调用 loadLanguage(navigator.language || "zh") 初始化
• 切换时只遍历所有 [data-i18n] 元素，用 element.textContent = t(key) 更新
• 需要翻译 placeholder、title、alt 等属性？加 data-i18n-attr="placeholder" 单独处理

如何让语言偏好持久化并自动匹配系统设置

用户切一次语言就忘，体验断层。必须存到 localStorage，且首次访问时主动读取 navigator.language 做 fallback，而不是硬写死 "zh"。

注意 navigator.language 返回的是 "zh-CN" 这类带区域码的字符串，而你的 locale key 很可能只是 "zh"。得做截断或映射：

立即学习“前端免费学习笔记（深入）”；

const lang = localStorage.getItem("lang") ||    navigator.language.split("-")[0] || "en";

• 每次调用 setLanguage(lang) 时同步写入 localStorage.setItem("lang", lang)
• 在 上也动态更新 lang 属性，方便 css 选择器（如 html[lang="en"] .btn）和屏幕阅读器识别
• 别忘了监听 storage 事件——其他标签页改了语言，当前页也要响应

为什么用 data-i18n 比用 class 名或 ID 更可靠

用 class="tuc-19bc10f7-4e0522-0 header-title tuc-19bc10f7-4e0522-0" 去查元素再翻译，容易和样式类冲突；用 id="login-btn" 则限制一个页面只能有一个登录按钮。而 data-i18n 是语义专用属性，无副作用。

• 
  

  欢迎

  —— 翻译主文本

• —— 翻译 placeholder
• —— 翻译 alt 文本
• 支持嵌套键："nav.items.home"，结构清晰，多人协作不易撞 key

静态资源路径怎么随语言切换（比如 banner 图、pdf 下载链接）

图片、PDF、音频等资源本身不支持“翻译”，但路径可以按语言组织。比如 /i18n/zh/banner.jpg 和 /i18n/en/banner.jpg。

不要在 HTML 里写死 src="/banner.jpg"，而是用 data-i18n-src 属性标记，由 JS 根据当前语言拼路径：

@@##@@ // → 当前语言为 en 时，自动设为 src="/i18n/en/banner.jpg"

• 路径映射规则写在配置里，比如 assetMap: { "assets.banner": "banner.jpg" }
• 避免在 JS 里拼接字符串，用 new URL(path, base) 处理相对路径更安全
• 如果资源不存在，要有降级逻辑（比如默认加载 /i18n/en/ 下的文件，再 fallback 到根目录）

实际最难的不是切换动作本身，而是文案键名设计是否可扩展、是否覆盖所有动态场景（比如带变量的句子：“已删除 3 个项目”）、以及服务端渲染时如何与客户端语言同步。这些点一旦漏掉，后期补成本远高于初期多花十分钟想清楚结构。