JS 国际化方案实现 - 动态语言切换与复数规则处理的完整方案

en.json

zh.json

t('key', { count: 1 })

Intl.PluralRules

message_one: "...", message_other: "..."

src/locales

en.json

zh-CN.json

es.json

import('./locales/${lang}.json')

// 假设这是你的i18n核心模块
let currentLocale = 'en';
let messages = {};

async function loadLocale(locale) {
  try {
    const localeMessages = await import(`./locales/${locale}.json`);
    messages = localeMessages.default; // 或根据你的导出方式调整
    currentLocale = locale;
    // 触发UI更新的逻辑，例如发布一个事件或更新全局状态
    console.log(`Loaded locale: ${locale}`);
    return true;
  } catch (error) {
    console.error(`Failed to load locale ${locale}:`, error);
    // 降级到默认语言或显示错误信息
    return false;
  }
}

function t(key, replacements = {}) {
  let message = messages[key] || key; // 如果找不到键，就直接返回键本身
  for (const [placeholder, value] of Object.entries(replacements)) {
    message = message.replace(`{{${placeholder}}}`, value);
  }
  return message;
}

// 示例用法
// loadLocale('zh-CN').then(() => {
//   console.log(t('greeting'));
// });

React.memo

useMemo

Intl.PluralRules

// 简单示例
const prEn = new Intl.PluralRules('en-US');
console.log(prEn.select(0)); // "other"
console.log(prEn.select(1)); // "one"
console.log(prEn.select(2)); // "other"

const prAr = new Intl.PluralRules('ar'); // 阿拉伯语
console.log(prAr.select(0)); // "zero"
console.log(prAr.select(1)); // "one"
console.log(prAr.select(2)); // "two"
console.log(prAr.select(10)); // "few"
console.log(prAr.select(100)); // "other"

0

other

zero

Intl.PluralRules

// en.json
{
  "itemCount": {
    "one": "You have {{count}} item.",
    "other": "You have {{count}} items."
  }
}

// ar.json
{
  "itemCount": {
    "zero": "ليس لديك أي عناصر.",
    "one": "لديك عنصر واحد.",
    "two": "لديك عنصران.",
    "few": "لديك بعض العناصر ({{count}}).",
    "many": "لديك الكثير من العناصر ({{count}}).",
    "other": "لديك عناصر ({{count}})."
  }
}

t

Intl.PluralRules

function tWithPlural(key, count, replacements = {}) {
  const pr = new Intl.PluralRules(currentLocale);
  const pluralCategory = pr.select(count); // 获取复数类别

  // 尝试获取特定复数类别的翻译
  let message = messages[key] && messages[key][pluralCategory];

  // 如果特定复数类别没有，尝试回退到 'other'
  if (!message && messages[key] && messages[key].other) {
    message = messages[key].other;
  }

  // 如果还是没有，就直接用键作为回退
  if (!message) {
    message = key;
  }

  // 替换占位符，包括 count
  let finalMessage = message.replace(`{{count}}`, count);
  for (const [placeholder, value] of Object.entries(replacements)) {
    finalMessage = finalMessage.replace(`{{${placeholder}}}`, value);
  }
  return finalMessage;
}

// 示例用法
// console.log(tWithPlural('itemCount', 1)); // "You have 1 item." (en)
// console.log(tWithPlural('itemCount', 5)); // "You have 5 items." (en)
// console.log(tWithPlural('itemCount', 0, { currentLocale: 'ar' })); // "ليس لديك أي عناصر." (ar)

if (count === 1) { /* singular */ } else { /* plural */ }