JavaScript多语言格式化库实现技巧

{
  "zh-CN": {
    "greeting": "你好，{name}",
    "count": "数量：{count, number}",
    "date": "今天是：{today, date}",
    "price": "价格：{amount, currency}"
  },
  "en-US": {
    "greeting": "Hello, {name}",
    "count": "Count: {count, number}",
    "date": "Today is: {today, date}",
    "price": "Price: {amount, currency}"
  }
}

class ResourceManager {
  constructor(messages) {
    this.messages = messages;
    this.locale = 'en-US';
  }

  setLocale(locale) {
    if (this.messages[locale]) {
      this.locale = locale;
    } else {
      console.warn(`Locale ${locale} not found`);
    }
  }

  getMessage(key) {
    return this.messages[this.locale]?.[key] || key;
  }
}

function formatValue(value, type, locale) {
  switch (type) {
    case 'number':
      return value.toLocaleString(locale);
    case 'currency':
      return value.toLocaleString(locale, { style: 'currency', currency: 'USD' });
    case 'date':
      return new Date(value).toLocaleDateString(locale);
    default:
      return String(value);
  }
}

function interpolate(template, data, locale) {
  return template.replace(/\{(\w+)(,\s*(\w+))?\}/g, (match, key, _, type) => {
    const rawValue = data[key];
    if (type) {
      return formatValue(rawValue, type.trim(), locale);
    }
    return rawValue !== undefined ? rawValue : match;
  });
}

class I18n {
  constructor(messages, options = {}) {
    this.resourceManager = new ResourceManager(messages);
    this.locale = options.locale || 'en-US';
    this.resourceManager.setLocale(this.locale);
  }

  setLocale(locale) {
    this.locale = locale;
    this.resourceManager.setLocale(locale);
  }

  t(key, data = {}) {
    const template = this.resourceManager.getMessage(key);
    return interpolate(template, data, this.locale);
  }
}

const i18n = new I18n(messages, { locale: 'zh-CN' });

i18n.t('greeting', { name: '小明' }); 
// 输出：你好，小明

i18n.t('count', { count: 1000 });
// 输出：数量：1,000

i18n.setLocale('en-US');
i18n.t('greeting', { name: 'John' });
// 输出：Hello, John