前端国际化(i18n)的JS实现方案_javascript技巧-js教程-PHP中文网

前端国际化(i18n)的JS实现方案_javascript技巧

夢幻星辰

发布： 2025-11-02 13:37:34

原创

283人浏览过

首先定义多语言资源文件，使用JSON格式存储不同语言文本；接着通过getBrowserLang()检测浏览器语言，并结合URL参数或localStorage确定当前语言；然后利用data-i18n属性标记需翻译的元素，编写translate()函数动态替换内容；最后提供语言切换按钮调用switchLanguage()更新界面并持久化选择。该方案轻量、无需构建工具，适合静态网站，核心在于统一标记与可维护的语言包结构。

前端国际化(i18n)的js实现方案_javascript技巧

前端国际化（i18n）的核心目标是让网页内容能根据用户的语言环境动态切换。在不依赖大型框架的前提下，使用原生 JavaScript 实现轻量级 i18n 是许多项目尤其是静态网站或小型应用的实用选择。以下是一种简洁、可维护的 JS 国际化实现方案。

1. 定义多语言资源文件

将不同语言的文本内容组织为 JSON 格式的对象，便于维护和扩展。

const LANGUAGES = {
  en: {
    welcome: "Welcome to our site",
    login: "Login",
    logout: "Logout"
  },
  zh: {
    welcome: "欢迎访问我们的网站",
    login: "登录",
    logout: "退出"
  }
};

登录后复制

你可以将这些数据拆分为独立文件（如 lang/en.js、lang/zh.js），通过模块化方式引入，提升可维护性。

2. 检测用户语言偏好

自动获取浏览器的语言设置，作为默认显示语言。

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

function getBrowserLang() {
  const lang = navigator.language || 'en';
  return lang.startsWith('zh') ? 'zh' : 'en'; // 简单判断
}
</font>

登录后复制

也可结合 URL 参数（如 ?lang=zh）或 localStorage 手动指定语言，优先级高于浏览器默认。

function getCurrentLang() {
  return new URLSearchParams(window.location.search).get('lang')
      || localStorage.getItem('i18n_lang')
      || getBrowserLang();
}

登录后复制

3. 动态替换页面文本

通过自定义属性标记需要翻译的元素，例如：

巧文书

巧文书是一款AI写标书、AI写方案的产品。通过自研的先进AI大模型，精准解析招标文件，智能生成投标内容。

查看详情

<p data-i18n="welcome"></p>
<button data-i11n="login"></button>

登录后复制

然后编写函数遍历这些元素并填充对应语言的文本：

function translate(lang) {
  const texts = LANGUAGES[lang] || LANGUAGES.en;
  document.querySelectorAll('[data-i18n]').forEach(el => {
    const key = el.getAttribute('data-i18n');
    if (texts[key]) {
      el.textContent = texts[key];
    }
  });
  localStorage.setItem('i18n_lang', lang); // 持久化选择
}
</font>

登录后复制

调用 translate(getCurrentLang()) 即可完成初始化渲染。

4. 提供语言切换功能

添加按钮或下拉菜单，允许用户手动切换语言：

function switchLanguage(lang) {
  translate(lang);
}
// 使用示例
// <button onclick="switchLanguage('zh')">中文</button>
// <button onclick="switchLanguage('en')">English</button>

登录后复制

切换后页面立即更新，且下次访问会记住上次选择。

基本上就这些。这种方案无需构建工具，兼容性好，适合嵌入任何静态页面。关键在于结构清晰、标记统一、语言包易维护。随着项目变大，可考虑升级到 i18next 或框架专用方案，但原理相通。不复杂但容易忽略的是保持 key 的一致性与可读性，比如使用命名空间：header.login、footer.copyright 等。

以上就是前端国际化(i18n)的JS实现方案_javascript技巧的详细内容，更多请关注php中文网其它相关文章！