当前位置：首页 > JavaScript

js实现中英文切换

2026-04-04 08:16:49JavaScript

实现中英文切换的方法

使用对象存储语言包

通过对象存储不同语言的文本内容，切换时根据当前语言选择对应的文本。

const languages = {
  en: {
    welcome: "Welcome",
    buttonText: "Click Me"
  },
  zh: {
    welcome: "欢迎",
    buttonText: "点击我"
  }
};

let currentLang = 'en';

function switchLanguage(lang) {
  currentLang = lang;
  updateTexts();
}

function updateTexts() {
  document.getElementById('welcome').textContent = languages[currentLang].welcome;
  document.getElementById('button').textContent = languages[currentLang].buttonText;
}

利用HTML的lang属性

通过修改HTML根元素的lang属性来改变页面语言方向。

js实现中英文切换

function changeLanguage(lang) {
  document.documentElement.lang = lang;
  // 其他文本更新逻辑
}

结合CSS选择器

为不同语言定义特定样式，通过改变body类名实现切换。

body.en .chinese-text {
  display: none;
}
body.zh .english-text {
  display: none;
}

function toggleLanguage() {
  document.body.classList.toggle('en');
  document.body.classList.toggle('zh');
}

使用本地存储保存语言偏好

将用户选择的语言保存在localStorage中，页面加载时读取。

js实现中英文切换

// 设置语言
function setLanguage(lang) {
  localStorage.setItem('preferredLanguage', lang);
  applyLanguage(lang);
}

// 应用语言
function applyLanguage(lang) {
  // 实现文本更新逻辑
}

// 初始化时读取
window.addEventListener('DOMContentLoaded', () => {
  const lang = localStorage.getItem('preferredLanguage') || 'en';
  applyLanguage(lang);
});

使用i18n库

对于复杂项目，可以使用专业的国际化库如i18next。

import i18n from 'i18next';

i18n.init({
  lng: 'en',
  resources: {
    en: {
      translation: {
        "welcome": "Welcome"
      }
    },
    zh: {
      translation: {
        "welcome": "欢迎"
      }
    }
  }
});

// 切换语言
function changeLanguage(lng) {
  i18n.changeLanguage(lng);
}

// 使用文本
document.getElementById('title').innerText = i18n.t('welcome');

动态加载语言文件

对于大型应用，可以按需加载语言文件。

async function loadLanguage(lang) {
  const response = await fetch(`/locales/${lang}.json`);
  const messages = await response.json();
  // 应用加载的语言包
}

以上方法可以根据项目规模和需求选择适合的实现方式，小型项目可以使用简单的对象存储方式，大型项目建议使用专业的i18n库。