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

实现多语言切换功能，核心是动态替换页面文本内容，并根据用户选择持久化语言偏好。以下是清晰、实用的 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];
    }
  });
}

4. 页面加载时恢复上次选择

读取本地存储的语言设置，避免每次刷新重置为默认语言。

window.onload = function() {
  const savedLang = localStorage.getItem(‘language’) || ‘zh’; // 默认中文
  setLanguage(savedLang);
}

基本上就这些。这种方式轻量、无需依赖库，适合中小型项目。关键是把文本集中管理，通过标识符自动替换，再配合本地存储记住用户偏好。不复杂但容易忽略细节，比如初始化语言和处理缺失翻译的情况。

以上就是js如何实现