0Pricing
React Academy · 课时

复数形式与插值

处理基于数量的复数形式,并将动态值插入翻译后的字符串。

复数形式与插值 是 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 反馈 — 无需本地设置。

此课程中的所有课时

  1. 设置 react-i18next
  2. 使用 useTranslation 钩子
  3. 复数形式与插值
  4. 语言切换器与翻译延迟加载
← 返回 React Academy