# i18n 与本地化 > 国际化 (i18n) 和本地化 (L10n) 最佳实践。 --- ## 1. 核心概念 | 术语 | 含义 | |------|---------| | **i18n** | 国际化 - 使应用支持翻译 | | **L10n** | 本地化 - 实际的翻译工作 | | **Locale** | 语言 + 地区 (en-US, tr-TR) | | **RTL** | 从右向左书写的语言 (阿拉伯语, 希伯来语) | --- ## 2. 何时使用 i18n | 项目类型 | 是否需要 i18n? | |--------------|--------------| | 公共 Web 应用 | ✅ 是 | | SaaS 产品 | ✅ 是 | | 内部工具 | ⚠️ 可能 | | 单地区应用 | ⚠️ 考虑未来扩展 | | 个人项目 | ❌ 可选 | --- ## 3. 实现模式 ### React (react-i18next) tsx import { useTranslation } from 'react-i18next'; function Welcome() { const { t } = useTranslation(); return

{t('welcome.title')}

; } ### Next.js (next-intl) tsx import { useTranslations } from 'next-intl'; export default function Page() { const t = useTranslations('Home'); return

{t('title')}

; } ### Python (gettext) python from gettext import gettext as _ print(_("Welcome to our app")) --- ## 4. 文件结构 locales/ ├── en/ │ ├── common.json │ ├── auth.json │ └── errors.json ├── tr/ │ ├── common.json │ ├── auth.json │ └── errors.json └── ar/ # RTL └── ... --- ## 5. 最佳实践 ### 推荐 ✅ - 使用翻译键值，而非原始文本 - 按功能模块划分翻译命名空间 - 支持复数形式 - 按区域设置处理日期/数字格式 - 从一开始就规划 RTL 支持 - 对复杂字符串使用 ICU 消息格式 ### 不推荐 ❌ - 在组件中硬编码字符串 - 拼接已翻译的字符串 - 假设文本长度（德语通常比英语长 30%） - 忽略 RTL 布局 - 在同一文件中混合多种语言 --- ## 6. 常见问题 | 问题 | 解决方案 | |-------|----------| | 缺失翻译 | 回退到默认语言 | | 硬编码字符串 | 使用 Lint/检查脚本 | | 日期格式 | 使用 Intl.DateTimeFormat | | 数字格式 | 使用 Intl.NumberFormat | | 复数形式 | 使用 ICU 消息格式 | --- ## 7. RTL 支持 css /* CSS 逻辑属性 */ .container { margin-inline-start: 1rem; /* 替代 margin-left */ padding-inline-end: 1rem; /* 替代 padding-right */ } [dir="rtl"] .icon { transform: scaleX(-1); } --- ## 8. 检查清单 发布前： - [ ] 所有面向用户的字符串均使用翻译键值 - [ ] 所有支持的语言均存在对应的区域设置文件 - [ ] 日期/数字格式化使用 Intl API