前端国际化实现方案 | 极客日志

JavaScript大前端

前端国际化实现方案

前端国际化的实现方案，指出硬编码和简单文本替换的弊端。推荐使用 i18next 库，并详细讲解了配置方法、复数形式处理、日期时间格式化、货币格式处理以及 RTL 语言支持。同时提供了分离翻译文件、命名空间管理和动态加载的最佳实践，强调国际化应以提升用户体验为目的，避免过度设计。

暗影行者发布于 2026/4/5更新于 2026/4/131 浏览

前端国际化实现方案

常见误区

国际化并非简单的文本替换。不同语言的语法结构差异可能导致直接替换出现错误。常见的误区包括：

硬编码文本：难以维护和翻译。
简单文本替换：无法处理复杂的翻译场景。
忽略复数形式：在不同语言中可能不正确。
忽略日期和时间格式：在不同地区可能显示错误。
忽略货币格式：在不同国家可能显示错误。

反面示例代码：

// 硬编码文本
function Welcome() {
  return <h1>Welcome to our app!</h1>;
}

// 简单文本替换
const translations = {
  en: { welcome: 'Welcome to our app!', login: 'Login', register: 'Register' },
  zh: { welcome: '欢迎使用我们的应用！', login: '登录', register: '注册' }
};
function Welcome() {
  const lang = 'zh';
  return <h1>{translations[lang].welcome}</h1>;
}

正确的做法

使用 i18next

安装依赖
```
npm install i18next react-i18next
```

配置

 i18n  ;
 { initReactI18next }  ;

 resources = {
  : {
    : {
      : ,
      : ,
      : 
    }
  },
  : {
    : {
      : ,
      : ,
      : 
    }
  }
};

i18n
  .(initReactI18next)
  .({
    resources,
    : ,
    : ,
    : { :  }
  });

  i18n;

极客日志微信公众号二维码

更多推荐文章

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

切换语言

import React from 'react';
import { useTranslation } from 'react-i18next';

function LanguageSelector() {
  const { i18n } = useTranslation();
  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };
  return (
    <div>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('zh')}>中文</button>
    </div>
  );
}

// 配置复数规则
const resources = {
  en: {
    translation: {
      itemCount: 'You have {{count}} item in your cart.',
      itemCount_plural: 'You have {{count}} items in your cart.'
    }
  },
  zh: {
    translation: {
      itemCount: '您的购物车中有 {{count}} 件商品。'
    }
  }
};

// 使用复数形式
function ItemCount({ count }) {
  const { t } = useTranslation();
  return <p>{t('itemCount', { count, plural: count !== 1 })}</p>;
}

// 使用 Intl.DateTimeFormat
function FormatDate({ date }) {
  const { i18n } = useTranslation();
  const locale = i18n.language;
  return (
    <p>
      {new Intl.DateTimeFormat(locale, {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      }).format(date)}
    </p>
  );
}

// 使用 Intl.NumberFormat
function FormatPrice({ price, currency = 'USD' }) {
  const { i18n } = useTranslation();
  const locale = i18n.language;
  return (
    <p>
      {new Intl.NumberFormat(locale, { style: 'currency', currency }).format(price)}
    </p>
  );
}

// 检测 RTL 语言
function isRTL(lang) {
  const rtlLanguages = ['ar', 'he', 'fa', 'ur'];
  return rtlLanguages.includes(lang);
}

// 设置 RTL 样式
function App() {
  const { i18n } = useTranslation();
  useEffect(() => {
    if (isRTL(i18n.language)) {
      document.documentElement.dir = 'rtl';
      document.documentElement.lang = i18n.language;
    } else {
      document.documentElement.dir = 'ltr';
      document.documentElement.lang = i18n.language;
    }
  }, [i18n.language]);
  return <div>应用内容</div>;
}

分离翻译文件

// public/locales/en/translation.json
{
  "welcome": "Welcome to our app!",
  "login": "Login"
}

配置后端加载

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    interpolation: { escapeValue: false }
  });

使用命名空间

function Home() {
  const { t } = useTranslation(['home', 'common']);
  return (
    <div>
      <h1>{t('welcome')}</h1>
      <button>{t('login', { ns: 'common' })}</button>
    </div>
  );
}

动态加载翻译

useEffect(() => {
  i18n.loadNamespaces('dynamic');
}, [i18n]);