前端国际化最佳实践：让你的网站走向世界

前端国际化最佳实践：让你的网站走向世界

毒舌时刻

前端国际化？这不是大公司才需要的吗？

"我的网站只面向国内用户，要什么国际化"——结果业务拓展到海外，临时抱佛脚，
"我直接用中文写死，多简单"——结果需要支持英文时，满世界找字符串，
"我用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> {} </> ); }