Angular Academy · 课时

复数与选择（ICU）

Q: 「复数与选择（ICU）」这节课中我会学到什么？

处理复数和性别相关文本 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

处理复数和性别相关文本

第 3 / 4 课13 个步骤

复数与选择（ICU） 是 CoddyKit 上的免费 Angular Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

为什么普通占位符不够用

“You have 1 messages” 是不正确的英语。不同语言具有不同的复数规则（有些语言有多种复数形式），还存在性别或类别相关的措辞。Angular 使用 ICU 消息格式处理这些情况：使用 plural 和 select 表达式。

plural 表达式

ICU plural 会根据数字选择措辞。您可以按复数类别列出各种情况，并为每种情况提供文本。

<p i18n>{count, plural,
  =0 {No messages}
  =1 {One message}
  other {{{count}} messages}
}</p>

复数类别

类别包括精确匹配（=0、=1）以及 CLDR 关键字：zero、one、two、few、many 和必需的 other。不同区域设置会自动使用不同的子集。

井号占位符

在复数分支中，# 是所匹配数字的简写，因此无需重复绑定。

<p i18n>{count, plural,
  =1 {You have one item}
  other {You have # items}
}</p>

select 表达式

select 会根据字符串值选择文本，非常适合表示性别、状态或类型等类别。

<p i18n>{gender, select,
  male {He replied}
  female {She replied}
  other {They replied}
}</p>

other 是必需的

plural 和 select 都要求包含 other 分支。当没有任何特定情况匹配时，它会作为后备分支；如果缺少该分支，Angular 将报错。

与周围文本组合

ICU 表达式可以放在普通的已翻译文本中。请将完整句子放在一个 i18n 块中，以便翻译人员控制语序。

<p i18n>Hi {{ name }}, {count, plural,
  =0 {you have no notifications}
  other {you have # notifications}
}.</p>

在 plural 中嵌套 select

ICU 表达式支持嵌套，因此在语法有要求时，可以同时表达数量和类别。

{count, plural,
  =0 {No guests}
  other {# {type, select, vip {VIP} other {regular}} guests}
}

翻译人员会调整类别

翻译时，某个区域设置可以添加其语法所需的复数形式（例如，俄语使用 one、few 和 many）。ICU 单元的 XLIFF 目标文本包含本地化后的各个分支。

在 TypeScript 中使用 $localize 实现 ICU

ICU 语法也适用于使用 $localize 标记的字符串，因此组件代码中的复数逻辑同样可以翻译。

const label = $localize('{count, plural, =1 {1 file} other {{{count}} files}}');

为什么 ICU 优于手动使用 if/else

硬编码 count === 1 ? 'message' : 'messages' 假定使用英语式的二元复数规则。ICU 会将规则交给每个区域设置的 CLDR 数据处理，因此即使语言具有三种或六种复数形式，也无需修改代码就能正确显示。

快速检查

哪个 ICU 分支始终是必需的？

在交互式课程中回答

回顾

ICU plural 使用类别（=0、one、other）根据数字选择文本，并使用 # 表示数量；select 则根据字符串值进行选择。两者都需要 other 分支，支持自由嵌套，也适用于 $localize，并会让每个区域设置应用自己的复数规则。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 38
课程: 144

免费开始学习查看完整课程

常见问题解答

「复数与选择（ICU）」课时是免费的吗？

是的 — 「复数与选择（ICU）」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「复数与选择（ICU）」这节课中我会学到什么？

处理复数和性别相关文本你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「复数与选择（ICU）」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy