软件国际化（i18n）与本地化（l10n）实操指南：从架构到落地的全流程技巧

// 1. 安装依赖
npm install i18next react-i18next i18next-browser-languagedetector

// 2. 初始化i18next（src/i18n.js）
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

// 语言资源文件（可以放到src/locales目录）
const resources = {
  en: {
    translation: {
      welcome: "Welcome to our app!",
      button: "Submit",
      message_count: "{{count}} message",
      message_count_plural: "{{count}} messages"
    }
  },
  zh: {
    translation: {
      welcome: "欢迎使用我们的应用！",
      button: "提交",
      message_count: "{{count}}条消息"
    }
  }
};

i18n
  .use(LanguageDetector) // 自动检测用户语言（从浏览器、URL、cookie中）
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'en', // 找不到对应语言时用英文兜底
    interpolation: {
      escapeValue: false // React已经处理了XSS，不需要额外转义
    }
  });

export default i18n;

// 3. 组件中使用（src/components/Welcome.js）
import { useTranslation } from 'react-i18next';

function Welcome() {
  const { t } = useTranslation();
  return (
    <div>
      <h1>{t('welcome')}</h1>
      <button>{t('button')}</button>
    </div>
  );
}

// 格式化日期（根据用户语言自动调整）
function formatDate(date, lang) {
  return new Intl.DateTimeFormat(lang).format(date);
}
// 示例：美国用户看到“10/5/2024”，德国用户看到“5.10.2024”
formatDate(new Date(), 'en-US'); // "10/5/2024"
formatDate(new Date(), 'de-DE'); // "5.10.2024"

// 格式化货币（自动加货币符号和千分位）
function formatCurrency(amount, lang, currency) {
  return new Intl.NumberFormat(lang, {
    style: 'currency',
    currency: currency
  }).format(amount);
}
// 示例：1234.56美元显示“$1,234.56”，欧元显示“1.234,56 €”
formatCurrency(1234.56, 'en-US', 'USD'); // "$1,234.56"
formatCurrency(1234.56, 'de-DE', 'EUR'); // "1.234,56 €"

// 安装i18next-http-backend
npm install i18next-http-backend

// 修改i18n.js配置
import Backend from 'i18next-http-backend';

i18n
  .use(Backend) // 动态加载语言包
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    backend: {
      loadPath: '/locales/{{lng}}.json' // 语言包路径，比如/locales/en.json
    },
    // 其他配置不变
  });

/* 全局RTL样式（比如阿拉伯语、希伯来语） */
.rtl {
  direction: rtl;
  text-align: right;
}
/* 调整具体组件（比如输入框） */
.rtl input {
  text-align: right;
}

// 组件中根据语言切换样式
import { useTranslation } from 'react-i18next';

function App() {
  const { i18n } = useTranslation();
  const isRtl = i18n.language === 'ar' || i18n.language === 'he';
  return <div className={isRtl ? 'rtl' : ''}>...</div>;
}

// en.json（英语）
{
  "message_count": "{{count}} message",
  "message_count_plural": "{{count}} messages"
}

// fr.json（法语）
{
  "message_count": "{{count}} message",
  "message_count_plural": "{{count}} messages",
  "message_count_0": "Aucun message" // 0的情况单独定义
}

function MessageCount({ count }) {
  const { t } = useTranslation();
  return <p>{t('message_count', { count })}</p>;
}