前端国际化最佳实践：让你的网站走向世界
前端国际化最佳实践：让你的网站走向世界
毒舌时刻
前端国际化？这不是大公司才需要的吗？
"我的网站只面向国内用户，要什么国际化"——结果业务拓展到海外，临时抱佛脚，
"我直接用中文写死，多简单"——结果需要支持英文时，满世界找字符串，
"我用Google翻译，多快"——结果翻译质量差，用户体验差。
醒醒吧，国际化不是可选的，而是现代前端开发的标配！
为什么你需要这个？
- 全球用户覆盖：吸引来自不同国家和地区的用户
- 业务拓展：为未来的海外业务做准备
- 用户体验：让用户使用自己熟悉的语言
- 品牌形象：展现专业、全球化的品牌形象
- 合规要求：满足某些国家的语言法规要求
反面教材
// 反面教材：硬编码字符串 function Header() { return ( <div className="header"> <h1>欢迎来到我的网站</h1> <nav> <a href="/">首页</a> <a href="/about">关于我们</a> <a href="/contact">联系我们</a> </nav> </div> ); } // 反面教材：手动切换语言 function App() { const [language, setLanguage] = useState('zh'); const getText = (key) => { const texts = { zh: { welcome: '欢迎', about: '关于我们', contact: '联系我们' }, en: { welcome: 'Welcome', about: 'About Us', contact: 'Contact Us' } }; return texts[language][key]; }; return ( <div> <button onClick={() => setLanguage('zh')}>中文</button> <button onClick={() => setLanguage('en')}>English</button> <h1>{getText('welcome')}</h1> {/* 其他内容 */} </div> ); } 正确的做法
// 正确的做法：使用专业的国际化库 // 安装依赖：npm install i18next react-i18next // i18n.js import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import zh from './locales/zh.json'; import en from './locales/en.json'; import ja from './locales/ja.json'; // 配置i18next i18n .use(initReactI18next) .init({ resources: { zh: { translation: zh }, en: { translation: en }, ja: { translation: ja } }, lng: 'zh', // 默认语言 fallbackLng: 'en', // 回退语言 interpolation: { escapeValue: false // React已经默认转义 }, // 检测用户浏览器语言 detection: { order: ['navigator', 'localStorage', 'cookie'], caches: ['localStorage', 'cookie'] } }); export default i18n; // locales/zh.json /* { "welcome": "欢迎来到我的网站", "nav": { "home": "首页", "about": "关于我们", "contact": "联系我们" }, "greeting": "你好，{{name}}！", "count": "你有 {{count}} 条消息", "date": "今天是 {{date}}" } */ // locales/en.json /* { "welcome": "Welcome to my website", "nav": { "home": "Home", "about": "About Us", "contact": "Contact Us" }, "greeting": "Hello, {{name}}!", "count": "You have {{count}} messages", "date": "Today is {{date}}" } */ // 正确的做法：在组件中使用 import React from 'react'; import { useTranslation } from 'react-i18next'; function Header() { const { t } = useTranslation(); return ( <div className="header"> <h1>{t('welcome')}</h1> <nav> <a href="/">{t('nav.home')}</a> <a href="/about">{t('nav.about')}</a> <a href="/contact">{t('nav.contact')}</a> </nav> </div> ); } function Greeting({ name }) { const { t } = useTranslation(); return ( <div> {/* 带参数的翻译 */} <p>{t('greeting', { name })}</p> </div> ); } // 正确的做法：语言切换组件 import React from 'react'; import { useTranslation } from 'react-i18next'; function LanguageSwitcher() { const { i18n } = useTranslation(); const changeLanguage = (lng) => { i18n.changeLanguage(lng); }; return ( <div className="language-switcher"> <button onClick={() => changeLanguage('zh')}>中文</button> <button onClick={() => changeLanguage('en')}>English</button> <button onClick={() => changeLanguage('ja')}>日本語</button> </div> ); } // 正确的做法：日期和时间本地化 import React from 'react'; import { useTranslation } from 'react-i18next'; import { format } from 'date-fns'; import { zhCN, enUS, ja } from 'date-fns/locale'; function LocalizedDate() { const { i18n } = useTranslation(); const currentDate = new Date(); // 根据当前语言选择对应的locale const getLocale = () => { switch (i18n.language) { case 'zh': return zhCN; case 'en': return enUS; case 'ja': return ja; default: return enUS; } }; const formattedDate = format(currentDate, 'yyyy年MM月dd日 EEEE', { locale: getLocale() }); return ( <div> <p>{formattedDate}</p> </div> ); } // 正确的做法：数字本地化 function LocalizedNumber({ number }) { const { i18n } = useTranslation(); const formattedNumber = new Intl.NumberFormat(i18n.language).format(number); return ( <div> <p>{formattedNumber}</p> </div> ); } // 正确的做法：货币本地化 function LocalizedCurrency({ amount, currency }) { const { i18n } = useTranslation(); const formattedCurrency = new Intl.NumberFormat(i18n.language, { style: 'currency', currency: currency }).format(amount); return ( <div> <p>{formattedCurrency}</p> </div> ); } // 正确的做法：RTL语言支持 // 在CSS中添加 /* [dir="rtl"] { text-align: right; } [dir="rtl"] .nav { flex-direction: row-reverse; } */ function App() { const { i18n } = useTranslation(); // 根据当前语言设置direction React.useEffect(() => { const rtlLanguages = ['ar', 'he', 'fa']; document.documentElement.dir = rtlLanguages.includes(i18n.language) ? 'rtl' : 'ltr'; }, [i18n.language]); return ( <div> <LanguageSwitcher /> <Header /> <Greeting name="张三" /> <LocalizedDate /> <LocalizedNumber number={1234567.89} /> <LocalizedCurrency amount={100} currency="CNY" /> </div> ); } // 正确的做法：使用i18next-http-backend加载翻译 // 安装依赖：npm install i18next-http-backend /* import Backend from 'i18next-http-backend'; i18n .use(Backend) .use(initReactI18next) .init({ backend: { loadPath: '/locales/{{lng}}/{{ns}}.json' }, // 其他配置... }); */ // 正确的做法：使用i18next-scanner自动提取翻译 // package.json /* { "scripts": { "i18n:scan": "i18next-scanner --config i18next-scanner.config.js src" } } */ // i18next-scanner.config.js /* module.exports = { input: [ 'src/**/*.{js,jsx,ts,tsx}', ], output: './locales', options: { lngs: ['zh', 'en', 'ja'], defaultLng: 'zh', ns: ['translation'], defaultValue: (lng, ns, key) => key, resourceKeySeparator: '.', nsSeparator: ':', interpolation: { prefix: '{{', suffix: '}}' } } }; */ 毒舌点评
看看，这才叫前端国际化最佳实践！不是简单地手动切换字符串，而是使用专业的国际化库，统一管理翻译资源，支持日期、时间、数字、货币的本地化，甚至支持RTL语言。
记住，国际化不仅仅是翻译文本，还包括日期、时间、数字、货币等格式的本地化，以及RTL（从右到左）语言的支持。
所以，别再觉得国际化麻烦了，它是你网站走向世界的必备技能！
总结
- 使用专业库：如i18next、react-intl等
- 统一管理翻译资源：将翻译文本放在单独的JSON文件中
- 支持参数化翻译：处理带变量的文本
- 自动检测语言：根据用户浏览器设置自动切换语言
- 本地化格式：处理日期、时间、数字、货币的本地化
- RTL支持：支持从右到左的语言如阿拉伯语
- 懒加载翻译：按需加载翻译资源，减少包大小
- 自动提取翻译：使用工具自动提取需要翻译的字符串
前端国际化最佳实践，让你的网站走向世界！
