复数形式与插值
处理基于数量的复数形式,并将动态值插入翻译后的字符串。
复数形式与插值 是 CoddyKit 上的免费 React Academy 课时。 这是第 3 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。
欢迎
在本课中,您将使用 i18next 的插值和复数支持,处理基于数量的复数形式,并将动态值插入翻译字符串。
插值基础
在翻译字符串中使用双大括号作为占位符。将包含变量值的对象作为第二个参数传给 t()。
// JSON: "greeting": "Hello, {{name}}!"
t('greeting', { name: 'Alice' }); // Hello, Alice!多个插值变量
您可以根据需要在一个字符串中使用任意数量的插值变量。
// JSON: "summary": "You have {{count}} messages in {{folder}}"
t('summary', { count: 5, folder: 'Inbox' });
// You have 5 messages in Inbox转义 HTML
默认情况下,i18next 会转义插值值中的 HTML 字符。若要在插值值中渲染 HTML,请在 init 配置中设置 `escapeValue: false`(在 React 中已经是安全的,因为 React 会转义 JSX)。
复数形式
i18next 会自动支持复数形式。为单数定义 `key`,为复数定义 `key_other`(或 `key_plural`)。在插值对象中传入 `count`。
// JSON:
// "item": "{{count}} item"
// "item_other": "{{count}} items"
t('item', { count: 1 }); // 1 item
t('item', { count: 5 }); // 5 items语言特定的复数规则
不同语言有不同的复数规则。俄语有 4 种复数形式,阿拉伯语有 6 种。i18next 会自动为每种语言使用 Unicode CLDR 规则。请在翻译文件中定义所有必需的形式。
// Russian (ru):
// key_one, key_few, key_many, key_other零数量形式
i18next 还支持在 count 为 0 时使用特殊的 `key_zero` 形式,从而采用不同的措辞(例如使用“没有项目”而不是“0 个项目”)。
// JSON:
// "messages_zero": "No messages"
// "messages_one": "{{count}} message"
// "messages_other": "{{count}} messages"
t('messages', { count: 0 }); // No messages带复数形式的嵌套键
您可以在嵌套对象中使用复数键。像访问普通嵌套键一样,使用点号表示法访问它们。
// JSON: { "cart": { "items_one": "item", "items_other": "items" } }
t('cart.items', { count: 3 }); // items日期和数字格式化
i18next 集成了 Intl API,可根据区域设置格式化日期和数字。使用 i18n.format() 或 intlify 插件,将日期作为翻译的一部分进行格式化。
t('lastSeen', { date: new Date(), formatParams: {
date: { month: 'long', day: 'numeric' }
}});基于上下文的翻译
对于不同上下文中的语法差异形式(例如有性别差异的词语),请使用 `context` 选项。在翻译文件中定义 `key_male` 和 `key_female` 变体。
// JSON: { "hero_male": "Hero", "hero_female": "Heroine" }
t('hero', { context: 'female' }); // Heroine快速检查
如何将名为 'username' 的动态值传入使用 i18next 的翻译字符串?
回顾
使用 {{variable}} 进行插值,使用 key_other/key_one 表示复数形式,使用 key_zero 表示零数量形式。i18next 会根据语言自动应用 Unicode CLDR 复数规则。使用上下文处理语法变体。
接下来
下一课:**语言切换器与翻译的延迟加载**——您将构建区域设置切换器,并按需加载翻译包。
常见问题解答
「复数形式与插值」课时是免费的吗?
是的 — 「复数形式与插值」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 React Academy 课程的其余内容,请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。
「复数形式与插值」这节课中我会学到什么?
处理基于数量的复数形式,并将动态值插入翻译后的字符串。 你通过在浏览器中直接运行的动手代码来练习 React Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Academy 需要有经验吗?
无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 3 节课,共 4 节。
「复数形式与插值」课时需要多长时间?
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。
我能在这节 React Academy 课中编写并运行代码吗?
能。每节 React Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。