如何实现一个JavaScript的国际化（i18n）方案？

{
  "greeting": "你好",
  "welcome": "欢迎使用我们的应用"
}

{
  "greeting": "Hello",
  "welcome": "Welcome to our app"
}

class I18n {
  constructor() {
    this.translations = {};
    this.currentLang = 'zh-CN';
  }

  async load(lang) {
    if (this.translations[lang]) {
      this.currentLang = lang;
      return;
    }

    try {
      const response = await fetch(`/locales/${lang}.json`);
      const messages = await response.json();
      this.translations[lang] = messages;
      this.currentLang = lang;
    } catch (error) {
      console.error(`Failed to load language: ${lang}`, error);
    }
  }

  t(key, params) {
    let text = this.translations[this.currentLang]?.[key] || key;

    // 支持简单插值：如 {name}
    if (params) {
      Object.keys(params).forEach(param => {
        text = text.replace(new RegExp(`{${param}}`, 'g'), params[param]);
      });
    }

    return text;
  }
}

// 全局实例
const i18n = new I18n();
export default i18n;

import i18n from './i18n';

async function render() {
  await i18n.load('en-US'); // 或根据浏览器语言自动判断

  document.getElementById('greeting').textContent = i18n.t('greeting');
  document.getElementById('welcome').textContent = i18n.t('welcome', { name: 'User' });
}

render();

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