当前位置：首页 > JavaScript

js实现的语言切换功能

2026-04-04 22:32:56JavaScript

实现语言切换功能的方法

使用对象存储多语言文本

创建一个对象存储不同语言的文本内容，键为语言代码，值为对应的翻译内容。

const translations = {
  en: {
    welcome: "Welcome",
    about: "About Us"
  },
  zh: {
    welcome: "欢迎",
    about: "关于我们"
  }
};

获取用户语言偏好

通过浏览器API获取用户首选语言，或从本地存储中读取之前保存的语言设置。

let currentLang = localStorage.getItem('userLanguage') || navigator.language.slice(0,2);
if (!translations[currentLang]) currentLang = 'en'; // 默认英语

更新页面文本内容

遍历所有需要翻译的元素，根据当前语言更新文本内容。为需要翻译的元素添加特定属性如data-i18n。

js实现的语言切换功能

function updateTexts() {
  document.querySelectorAll('[data-i18n]').forEach(el => {
    const key = el.getAttribute('data-i18n');
    el.textContent = translations[currentLang][key];
  });
}

语言切换按钮事件

为语言切换按钮添加点击事件，保存用户选择并刷新页面文本。

document.getElementById('lang-switcher').addEventListener('change', (e) => {
  currentLang = e.target.value;
  localStorage.setItem('userLanguage', currentLang);
  updateTexts();
});

HTML结构示例

在HTML中使用自定义属性标记需要翻译的元素，并提供语言选择器。

js实现的语言切换功能

<h1 data-i18n="welcome"></h1>
<select id="lang-switcher">
  <option value="en">English</option>
  <option value="zh">中文</option>
</select>

动态加载语言文件（可选）

对于大型项目，可以按需加载语言文件以减少初始加载时间。

async function loadLanguage(lang) {
  const response = await fetch(`/locales/${lang}.json`);
  translations[lang] = await response.json();
  updateTexts();
}

处理复数形式和插值（高级）

对于需要处理变量替换或复数形式的场景，可以实现更复杂的翻译函数。

function t(key, variables = {}) {
  let text = translations[currentLang][key];
  Object.entries(variables).forEach(([k, v]) => {
    text = text.replace(`{{${k}}}`, v);
  });
  return text;
}