JS如何实现多语言切换_JavaScript前端多语言切换功能实现方法-js教程-PHP中文网

JS如何实现多语言切换_JavaScript前端多语言切换功能实现方法

看不見的法師

发布： 2025-11-05 20:51:02

原创

168人浏览过

答案是通过动态替换文本和本地存储实现多语言切换。首先定义多语言资源对象，使用data-i18n标记可翻译元素，编写setLanguage函数根据选择更新页面内容并存入localStorage，最后在页面加载时读取保存的语言偏好以恢复上次设置，实现无库轻量级国际化。

js如何实现多语言切换_javascript前端多语言切换功能实现方法

实现多语言切换功能，核心是动态替换页面文本内容，并根据用户选择持久化语言偏好。以下是清晰、实用的 JavaScript 多语言实现方法。

1. 准备多语言资源

将不同语言的文本以键值对形式组织，便于统一调用。

const languages = {
  'zh': {
    'greeting': '你好，世界',
    'title': '欢迎使用我们的网站'
  },
  'en': {
    'greeting': 'Hello, World',
    'title': 'Welcome to our site'
  }
};

2. 标记需要翻译的元素

使用自定义属性（如 data-i18n）标识需要本地化的文本节点。

<h1 data-i18n="title"></h1>
<p data-i18n="greeting"></p>
<button onclick="setLanguage('zh')">中文</button>
<button onclick="setLanguage('en')">English</button>

3. 实现语言切换函数

根据用户选择加载对应语言，并更新页面内容。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

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

function setLanguage(lang) {
  // 保存用户选择到 localStorage
  localStorage.setItem('language', lang);

  // 获取所有带 data-i18n 的元素
  document.querySelectorAll('[data-i18n]').forEach(element => {
    const key = element.getAttribute('data-i18n');
    if (languages[lang] && languages[lang][key]) {
      element.textContent = languages[lang][key];
    }
  });
}