i18n国际化实现方案-js实战教程

const messages = {
  en: {
    greeting: 'Hello',
    welcome: 'Welcome to our site'
  },
  zh: {
    greeting: '你好',
    welcome: '欢迎来到我们的网站'
  }
};

let currentLang = 'en';

function t(key) {
  return messages[currentLang][key] || key;
}

function setLanguage(lang) {
  if (messages[lang]) {
    currentLang = lang;
  }
  // 重新渲染页面文本
  document.querySelectorAll('[data-i18n]').forEach(el => {
    const key = el.getAttribute('data-i18n');
    el.textContent = t(key);
  });
}

<div data-i18n="greeting"></div>
<button data-i18n="welcome"></button>

function getBrowserLang() {
  const lang = navigator.language || 'en';
  return lang.startsWith('zh') ? 'zh' : 'en';
}

// 页面加载时初始化语言
currentLang = getBrowserLang();
setLanguage(currentLang);

function t(key, args) {
  let text = messages[currentLang][key] || key;
  if (args) {
    Object.keys(args).forEach(k => {
      text = text.replace(new RegExp(`{${k}}`, 'g'), args[k]);
    });
  }
  return text;
}

// 使用：t('helloUser', { name: 'Alice' })