SuperAPI AI 工具集

i18n-localization

前端与建站

查看项目

更新于 10-14 19:29

技能介绍

i18n-localization 是一个国际化和本地化(i18n & Localization)主题的实践技能,主要面向需要让应用支持多语言的开发场景。以下内容依据官方资料整理,未提供的细节明确标注。

【用途】 该技能整理 i18n 与 L10n 的最佳实践,帮助开发者识别和解决多语言支持中的常见问题,包括检测硬编码字符串、管理翻译、组织语言文件以及支持 RTL(从右到左)语言。

【核心概念】 资料列出以下术语:i18n 指国际化,即让应用可翻译;L10n 指本地化,即实际翻译;Locale 指语言加地区(如 en-US、tr-TR);RTL 指从右到左语言(如阿拉伯语、希伯来语)。

【何时使用】 资料给出项目类型与是否需要 i18n 的对应关系:公开 Web 应用需要;SaaS 产品需要;内部工具可能;单地区应用可考虑未来需求;个人项目可选。

【实现模式】 资料提供三种框架的实现示例。React 使用 react-i18next,通过 useTranslation 获取 t 函数,如 t('welcome.title')。Next.js 使用 next-intl,通过 useTranslations('Home') 获取 t 函数,如 t('title')。Python 使用 gettext,通过 gettext 的别名 _ 包裹文本,如 _("Welcome to our app")。

【文件结构】 建议的 locales 目录按语言划分,例如 locales/en/ 下包含 common.json、auth.json、errors.json;locales/tr/ 下同样结构;ar/ 为 RTL 目录。

【最佳实践】 推荐做法包括:使用翻译键而非原始文本;按功能划分翻译命名空间;支持复数形式;按 locale 处理日期与数字格式;从一开始就规划 RTL;对复杂字符串使用 ICU 消息格式。应避免的做法包括:在组件中硬编码字符串;拼接已翻译字符串;假设文本长度(德语长约 30%);忽略 RTL 布局;在同一文件中混用多种语言。

【常见问题与解决】 缺失翻译:回退到默认语言。硬编码字符串:使用 linter 或检查脚本。日期格式:使用 Intl.DateTimeFormat。数字格式:使用 Intl.NumberFormat。复数化:使用 ICU 消息格式。

【RTL 支持】 资料给出 CSS 逻辑属性示例:使用 margin-inline-start 替代 margin-left,padding-inline-end 替代 padding-right;对 [dir="rtl"] 下的图标使用 transform: scaleX(-1) 进行水平翻转。

【发货前检查清单】 所有面向用户的字符串使用翻译键;为所有支持语言创建语言文件;日期和数字格式使用 Intl API;测试 RTL 布局(如适用);配置回退语言;组件中无硬编码字符串。

【脚本】 scripts/i18n_checker.py 用于检测硬编码字符串和缺失翻译,命令为 python scripts/i18n_checker.py <project_path>。

【限制】 资料未提供该技能的安装方式、许可证、依赖要求、支持的框架版本、脚本的具体实现细节以及收费信息,这些内容暂未提供。