当前位置：首页 > JavaScript

js实现中英切换

2026-04-07 14:54:23JavaScript

实现中英切换的基本思路

通过JavaScript动态修改网页中的文本内容，结合CSS和HTML实现语言切换功能。通常需要准备中英两套文本数据，通过事件触发切换逻辑。

准备语言数据

将中英文文本存储在对象中，键名与HTML元素ID或类名对应：

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

HTML结构示例

为需要切换文本的元素添加特定属性（如data-lang-key）：

<h1 data-lang-key="title">Welcome</h1>
<button data-lang-key="button">Click Me</button>
<select id="language-selector">
  <option value="en">English</option>
  <option value="zh">中文</option>
</select>

JavaScript切换逻辑

监听语言选择变化并更新页面文本：

js实现中英切换

document.getElementById('language-selector').addEventListener('change', function(e) {
  const lang = e.target.value;
  updateText(lang);
});

function updateText(lang) {
  const elements = document.querySelectorAll('[data-lang-key]');
  elements.forEach(el => {
    const key = el.getAttribute('data-lang-key');
    el.textContent = languages[lang][key];
  });
}

持久化语言选择

使用localStorage保存用户选择的语言偏好：

// 初始化时读取保存的语言
const savedLang = localStorage.getItem('language') || 'en';
document.getElementById('language-selector').value = savedLang;
updateText(savedLang);

// 切换时保存选择
document.getElementById('language-selector').addEventListener('change', function(e) {
  const lang = e.target.value;
  localStorage.setItem('language', lang);
  updateText(lang);
});

高级实现方案

对于复杂项目，可以考虑以下优化：

使用类封装语言切换功能：

js实现中英切换

class LanguageSwitcher {
  constructor(config) {
    this.languages = config.languages;
    this.defaultLang = config.defaultLang;
    this.init();
  }

  init() {
    this.loadLanguage();
    this.bindEvents();
  }

  loadLanguage() {
    const lang = localStorage.getItem('language') || this.defaultLang;
    this.updatePageText(lang);
  }

  bindEvents() {
    document.querySelectorAll('.lang-switch').forEach(btn => {
      btn.addEventListener('click', (e) => {
        const lang = e.target.dataset.lang;
        this.switchLanguage(lang);
      });
    });
  }

  switchLanguage(lang) {
    localStorage.setItem('language', lang);
    this.updatePageText(lang);
  }

  updatePageText(lang) {
    Object.keys(this.languages[lang]).forEach(key => {
      const elements = document.querySelectorAll(`[data-lang-key="${key}"]`);
      elements.forEach(el => {
        el.textContent = this.languages[lang][key];
      });
    });
  }
}

框架集成方案

在Vue/React等框架中实现更简洁：

Vue示例：

// 在Vue实例中
data() {
  return {
    currentLang: 'en',
    languages: {
      en: { welcome: 'Welcome' },
      zh: { welcome: '欢迎' }
    }
  }
},
methods: {
  switchLang(lang) {
    this.currentLang = lang;
  }
}

React示例：

function App() {
  const [lang, setLang] = useState('en');
  const texts = {
    en: { title: 'Welcome' },
    zh: { title: '欢迎' }
  };

  return (
    <div>
      <h1>{texts[lang].title}</h1>
      <button onClick={() => setLang('en')}>English</button>
      <button onClick={() => setLang('zh')}>中文</button>
    </div>
  );
}