如何在JavaScript中动态加载特定语言内容？

一、重构多语言内容存储结构 #

先把单语言的聊天消息数组改成多语言键值对结构，每个语言对应一套完整内容，方便根据语言标识快速匹配：

// 多语言内容存储
const chatMessages = {
  'en': [
    {
      name: "Emily",
      msg: "<strong class='c-1'>Emily:</strong> Hey guys! Have you heard about the party at Jake's place this weekend? It's gonna be lit!",
      delay: 10,
      align: "left",
      showTime: true,
      time: "20:00"
    },
    {
      name: "Sarah",
      msg: "<strong class='c-1'>Sarah:</strong> Yeah, I'm so hyped for it! Can't wait to see everyone there.",
      delay: 600,
      align: "left",
      showTime: true,
      time: "20:01"
    },
    {
      name: "Mark",
      msg: "<strong class='c-1'>Mark:</strong> Definitely gonna be there! We gonna turn up!",
      delay: 1200,
      align: "left",
      showTime: true,
      time: "20:02"
    },
    {
      name: "John",
      msg: "Count me in, no doubt. It's gonna be a blast!",
      delay: 1200,
      align: "right",
      showTime: true,
      time: "20:03"
    }
  ],
  'zh-CN': [
    {
      name: "艾米丽",
      msg: "<strong class='c-1'>艾米丽:</strong> 嘿，大伙！你们听说杰克家这周末的派对了吗？肯定超嗨的！",
      delay: 10,
      align: "left",
      showTime: true,
      time: "20:00"
    },
    {
      name: "莎拉",
      msg: "<strong class='c-1'>莎拉:</strong> 当然听说了！我超期待的！迫不及待想见到所有人。",
      delay: 600,
      align: "left",
      showTime: true,
      time: "20:01"
    },
    {
      name: "马克",
      msg: "<strong class='c-1'>马克:</strong> 我肯定去！咱们要玩个痛快！",
      delay: 1200,
      align: "left",
      showTime: true,
      time: "20:02"
    },
    {
      name: "约翰",
      msg: "算我一个，没跑的。这派对绝对会超棒！",
      delay: 1200,
      align: "right",
      showTime: true,
      time: "20:03"
    }
  ]
};

二、获取用户语言偏好 #

通过三种优先级递减的方式获取用户语言，确保能拿到合适的标识：

1. URL参数：用户手动切换语言时，通过?lang=zh-CN这类参数传递
2. 本地存储：记录用户上次选择的语言，下次打开自动沿用
3. 浏览器默认语言：如果前两者都没有，使用浏览器的navigator.language

代码实现：

function getUserPreferredLang() {
  // 1. 从URL参数获取
  const urlParams = new URLSearchParams(window.location.search);
  const urlLang = urlParams.get('lang');
  if (urlLang && chatMessages[urlLang]) {
    localStorage.setItem('userLang', urlLang);
    return urlLang;
  }

  // 2. 从本地存储获取
  const storedLang = localStorage.getItem('userLang');
  if (storedLang && chatMessages[storedLang]) {
    return storedLang;
  }

  // 3. 从浏览器默认语言获取（处理简写，比如把'zh'映射到'zh-CN'）
  const browserLang = navigator.language.split('-')[0];
  const fallbackLang = browserLang === 'zh' ? 'zh-CN' : 'en';
  return chatMessages[fallbackLang] ? fallbackLang : 'en';
}

三、动态加载对应语言内容 #

调用上面的函数拿到语言标识后，直接从多语言对象中取出对应内容：

const currentLang = getUserPreferredLang();
const currentMessages = chatMessages[currentLang];

四、渲染多语言内容 #

写一个简单的渲染函数，把加载好的聊天消息插入到页面中：

function renderChatMessages(messages) {
  const chatContainer = document.getElementById('chat-container');
  chatContainer.innerHTML = ''; // 清空原有内容

  messages.forEach(msg => {
    const messageEl = document.createElement('div');
    messageEl.className = `chat-message ${msg.align}`;
    messageEl.innerHTML = msg.msg;

    if (msg.showTime) {
      const timeEl = document.createElement('span');
      timeEl.className = 'chat-time';
      timeEl.textContent = msg.time;
      messageEl.appendChild(timeEl);
    }

    // 按delay设置延迟显示
    setTimeout(() => {
      chatContainer.appendChild(messageEl);
      // 滚动到底部
      chatContainer.scrollTop = chatContainer.scrollHeight;
    }, msg.delay);
  });
}

// 执行渲染
renderChatMessages(currentMessages);

五、语言切换功能扩展 #

如果需要手动切换语言，修改URL参数或本地存储后重新加载内容即可：

function switchLang(lang) {
  if (chatMessages[lang]) {
    localStorage.setItem('userLang', lang);
    // 可选择更新URL参数后刷新页面，或直接重新渲染
    window.location.search = `?lang=${lang}`;
  }
}

// 绑定切换按钮事件
document.getElementById('switch-to-zh').addEventListener('click', () => switchLang('zh-CN'));
document.getElementById('switch-to-en').addEventListener('click', () => switchLang('en'));

内容的提问来源于stack exchange，提问作者Jenad Morgh