前端国际化最佳实践与本地化方案
为什么需要国际化?
很多开发者认为国际化是大公司的专利,或者等业务出海时再临时抱佛脚。但现实往往很骨感:硬编码中文导致后期修改痛苦,手动切换语言容易出错,第三方翻译质量参差不齐。国际化不仅是翻译文本,更是现代前端开发的标配,关乎全球用户覆盖、品牌形象以及合规要求。
常见误区
直接写死字符串是最常见的错误。比如组件里直接返回 <h1>欢迎来到我的网站</h1>,一旦需要英文就得全局搜索替换。另一种情况是手动维护一个字典对象来切换语言,虽然比硬编码好点,但缺乏扩展性,且容易遗漏新加的文案。
// 反面教材:硬编码字符串
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 = {
: { : , : , : },
: { : , : , : }
};
texts[language][key];
};
(
);
}

