前端国际化实现方案：让你的应用走向全球

正确的做法

使用i18next

// 1. 安装 // npm install i18next react-i18next // 2. 配置 import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; const resources = { en: { translation: { welcome: 'Welcome to our app!', login: 'Login', register: 'Register', itemCount: 'You have {{count}} item(s) in your cart.', itemCount_plural: 'You have {{count}} items in your cart.', orderDate: 'Order date: {{date}}', productPrice: 'Price: {{price}}' } }, zh: { translation: { welcome: '欢迎使用我们的应用！', login: '登录', register: '注册', itemCount: '您的购物车中有 {{count}} 件商品。', orderDate: '订单日期：{{date}}', productPrice: '价格：{{price}}' } } }; i18n .use(initReactI18next) .init({ resources, lng: 'en', fallbackLng: 'en', interpolation: { escapeValue: false } }); export default i18n; // 3. 使用 import React from 'react'; import { useTranslation } from 'react-i18next'; function Welcome() { const { t } = useTranslation(); return <h1>{t('welcome')}</h1>; } function ItemCount({ count }) { const { t } = useTranslation(); return <p>{t('itemCount', { count })}</p>; } // 4. 切换语言 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> ); } 

处理复数形式

// 1. 配置复数规则 import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; 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}} 件商品。' } } }; i18n .use(initReactI18next) .init({ resources, lng: 'en', fallbackLng: 'en', interpolation: { escapeValue: false } }); // 2. 使用复数形式 import React from 'react'; import { useTranslation } from 'react-i18next'; function ItemCount({ count }) { const { t } = useTranslation(); return <p>{t('itemCount', { count, plural: count !== 1 })}</p>; } 

处理日期和时间格式

// 1. 使用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> ); } // 2. 结合i18next使用 import React from 'react'; import { useTranslation } from 'react-i18next'; function OrderDate({ date }) { const { t, i18n } = useTranslation(); const locale = i18n.language; const formattedDate = new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long', day: 'numeric' }).format(date); return <p>{t('orderDate', { date: formattedDate })}</p>; } 

处理货币格式

// 1. 使用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> ); } // 2. 结合i18next使用 import React from 'react'; import { useTranslation } from 'react-i18next'; function ProductPrice({ price, currency = 'USD' }) { const { t, i18n } = useTranslation(); const locale = i18n.language; const formattedPrice = new Intl.NumberFormat(locale, { style: 'currency', currency }).format(price); return <p>{t('productPrice', { price: formattedPrice })}</p>; } 

处理RTL语言

// 1. 检测RTL语言 function isRTL(lang) { const rtlLanguages = ['ar', 'he', 'fa', 'ur']; return rtlLanguages.includes(lang); } // 2. 设置RTL样式 import React, { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; 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> ); } 

最佳实践

// 1. 分离翻译文件 // public/locales/en/translation.json { "welcome": "Welcome to our app!", "login": "Login", "register": "Register" } // public/locales/zh/translation.json { "welcome": "欢迎使用我们的应用！", "login": "登录", "register": "注册" } // 2. 配置i18next import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; 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 } }); export default i18n; // 3. 使用命名空间 // public/locales/en/common.json { "login": "Login", "register": "Register" } // public/locales/en/home.json { "welcome": "Welcome to our app!" } // 使用命名空间 import React from 'react'; import { useTranslation } from 'react-i18next'; function Home() { const { t } = useTranslation(['home', 'common']); return ( <div> <h1>{t('welcome')}</h1> <button>{t('login', { ns: 'common' })}</button> <button>{t('register', { ns: 'common' })}</button> </div> ); } // 4. 动态加载翻译 import React, { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; function DynamicComponent() { const { t, i18n } = useTranslation(); useEffect(() => { // 动态加载翻译 i18n.loadNamespaces('dynamic'); }, [i18n]); return <p>{t('dynamicText', { ns: 'dynamic' })}</p>; } 

毒舌点评

国际化确实很重要，但我见过太多开发者滥用这个特性，导致应用变得过于复杂。

想象一下，当你为了支持多语言，创建了大量的翻译文件，结果导致维护成本增加，这真的值得吗？

还有那些过度使用国际化库的开发者，为了使用某个库，而忽略了项目的实际需求，结果导致代码变得过于复杂。

所以，在进行国际化时，一定要把握好度。不要为了国际化而国际化，要根据实际情况来决定国际化的范围。

当然，对于面向全球用户的应用来说，国际化是必要的。但对于只面向特定地区用户的应用，过度的国际化反而会增加开发成本和维护难度。

最后，记住一句话：国际化的目的是为了提高用户体验，而不是为了炫技。如果你的国际化实现导致用户体验变得更差，那你就失败了。