javascript中如何进行国际化_如何实现多语言切换？-js教程-PHP中文网

javascript中如何进行国际化_如何实现多语言切换？

夢幻星辰

发布： 2025-12-21 21:55:02

原创

977人浏览过

JavaScript国际化核心是分离文案、动态加载语言包、运行时渲染；通过JSON资源文件、单例i18n类封装t()方法与setLocale()切换，支持插值、持久化及URL感知。

javascript中如何进行国际化_如何实现多语言切换？

JavaScript 中实现国际化（i18n）和多语言切换，核心是“分离文案”+“动态加载/切换语言包”+“运行时渲染”。不依赖框架也能做，但用成熟库更稳、更易维护。

准备多语言资源文件

把不同语言的文案抽成 JSON 对象，按 key 组织，保持结构一致：

zh.json

{ "welcome": "欢迎使用", "save": "保存", "loading": "加载中..." }

登录后复制

en.json

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

{ "welcome": "Welcome", "save": "Save", "loading": "Loading..." }

登录后复制

建议按模块或页面拆分（如 common.json、dashboard.json），后期支持按需加载。

封装一个轻量 i18n 工具类

用单例管理当前语言、加载资源、提供翻译方法：

盛世企业网站管理系统1.1.2

免费盛世企业网站管理系统(SnSee)系统完全免费使用，无任何功能模块使用限制，在使用过程中如遇到相关问题可以去官方论坛参与讨论。开源系统Web代码完全开源，在您使用过程中可以根据自已实际情况加以调整或修改，完全可以满足您的需求。强大且灵活独创的多语言功能，可以直接在后台自由设定语言版本，其语言版本不限数量，可根据自已需要进行任意设置；系统各模块可在后台自由设置及开启；强大且适用的后台管理支

查看详情

初始化时加载默认语言包（可异步 fetch）
提供 t(key, options?) 方法获取翻译文本
提供 setLocale(lang) 切换语言，并触发更新（如重渲染或 dispatch 自定义事件）

示例简版：

class I18n {
  constructor() {
    this.locale = 'zh';
    this.messages = {};
  }
  async load(locale) {
    const res = await fetch(`./locales/${locale}.json`);
    this.messages = await res.json();
    this.locale = locale;
    document.documentElement.lang = locale;
    this.emit('change');
  }
  t(key, replacements = {}) {
    let text = this.messages[key] || key;
    Object.entries(replacements).forEach(([k, v]) => {
      text = text.replace(`{{${k}}}`, v);
    });
    return text;
  }
  on(event, cb) { /* 订阅 change 事件 */ }
}

登录后复制