i18多语言
i18多语言
调研比较 (deepseek)
自研轻量级方案
// 自研多语言服务示例
class I18nService {
private resources: Record<string, Record<string, string>> = {};
private currentLang = 'en';
setLanguage(lang: string) {
this.currentLang = lang;
}
t(key: string, params?: Record<string, any>): string {
const keys = key.split('.');
let value: any = this.resources[this.currentLang];
for (const k of keys) {
value = value?.[k];
if (!value) return key; // 键名缺失回退
}
return typeof value === 'string' ? this.format(value, params) : key;
}
private format(text: string, params?: Record<string, any>) {
return params ? text.replace(/{(\w+)}/g, (_, p) => params[p]) : text;
}
}
优点
- 极简轻量:仅需 50 行代码即可实现基础功能,无第三方依赖
- 完全可控:可定制动态加载逻辑(如按页面拆分语言包),优化首屏加载速度
- 类型安全:结合 TS 泛型定义资源结构,避免键名拼写错误
缺点
- 功能局限:缺乏复数处理(如
"message": "You have {{count}} item | items"
)、上下文区分等高级特性 - 维护成本高:需手动实现格式化(日期/数字)、嵌套资源解析等,易产生边界 case 漏洞
- 生态缺失:无配套工具链(如键名提取、翻译协作平台集成)
i18next 专业库方案
// i18next 配置示例
import i18next from 'i18next';
import Backend from 'i18next-http-backend';
i18next
.use(Backend)
.init({
lng: 'en',
fallbackLng: 'en',
backend: { loadPath: '/locales/{{lng}}/{{ns}}.json' },
interpolation: { escapeValue: false },
// 支持复数、上下文、格式化等
});
优点
- 开箱即用的高级功能
- 复数处理:自动根据数量选择单复数形式(
"item": "{{count}} item || items"
) - 嵌套资源:支持对象层级结构(
"button": { "submit": "Submit" }
) - 自定义格式化:如数组插值(
{{items, joinWithArrow}}
)
- 复数处理:自动根据数量选择单复数形式(
- 生态完善
- 插件体系:动态加载(
i18next-http-backend
)、缓存(i18next-localstorage-cache
)、键名提取(i18next-parser
) - 框架集成:React(
react-i18next
)、Vue(vue-i18next
)、NestJS(@nestjs/i18n
)
- 插件体系:动态加载(
- 工程化支持
- 类型生成:通过工具(如
rollup-plugin-i18next-dts-gen
)自动生成资源类型定义 - 翻译管理:对接 Crowdin/Lokalise 等平台实现协作翻译
- 类型生成:通过工具(如
缺点
- 体积较大:基础库 + 插件后约 20–40 KB,对轻量应用可能过重
- 学习曲线:需掌握命名空间(namespace)、上下文(context)、格式化器等概念
- 灵活性限制:预定义的插件机制可能无法满足极端定制需求
关键维度对比
维度 | 自研方案 | i18next 方案 |
---|---|---|
基础功能 | 键值映射、动态加载、简单插值 | 键值映射、动态加载、插值、复数、上下文 |
高级特性 | 需手动实现(如复数逻辑复杂) | 内置日期/数字格式化、数组处理 |
开发效率 | 初期快,复杂需求时代码膨胀 | 学习曲线陡峭,但长期维护高效 |
类型安全 | 依赖 TS 泛型手动维护 | 自动生成 .d.ts 类型文件 |
性能优化 | 可精细控制按需加载 | 依赖插件(如懒加载语言包) |
维护成本 | 高(需自建工具链) | 低(完善生态+社区支持) |
选型场景建议
推荐自研方案的情况
- 超轻量应用:如 H5 活动页、浏览器扩展,只需基础中英文切换
- 特殊约束环境:嵌入式设备、严格体积限制的 SDK
- 深度定制需求:如与业务强绑定的动态资源加载策略(如按页面模块加载)
推荐 i18next 的情况
- 复杂应用:多层级资源、复数规则复杂(如俄语有 3 种复数形式)
- 团队协作项目:需翻译平台集成、键名自动化提取和校验
- 跨框架统一:React/Vue/Angular/React Native 技术栈混合使用
链接到当前文件 0
没有文件链接到当前文件