[Day04] Vue i18n - Pluralization

在本地化 (localize) 文字讯息时，我们可能会遇到某些语言会有复数型态的状况 (最常见的就是英文)，虽然我们可以透过个别定义 key value 的方式，再藉由程序逻辑去控制要显示哪一个，但这显然不是最好的做法。

{
  "apple": "apple",
  "apples": "apples",
  "car": "car",
  "cars": "cars"
}

<p>{{ count > 1 ? $t('apples') : $t('apple')}}</p>

所以今天我们要来分享在 Vue i18n 中实现多元化 (Pluralization) 的方式，如果对 Vue i18n 不太熟悉或者还没有看过前两篇的朋友建议先看过再回来此篇做阅读。

• Vue i18n - 导入 & 基础用法
• Vue i18n - Message Format Syntax

基本用法

在定义语系档时，只需要用 | 分隔符号来区隔开来不同数量上的的字词。

{
  "apple": "no apples | apple | apples",
  "car": "car | cars"
}

除了可以定义单数或复数以外，也可以定义数量为 0 时的表现方式。

所以在 template 的写法会是：

<p>{{ $t('apple', 0) }}</p>
<p>{{ $t('apple', 1) }}</p>
<p>{{ $t('apple', 2) }}</p>

<p>{{ $t('car', 0) }}</p>
<p>{{ $t('car', 1) }}</p>
<p>{{ $t('car', 2) }}</p>

由於我们 Vue i18n 是配置 Composition API mode 所以是用 $t，如果是 Legacy API mode 则是使用 $tc。

得到的结果是：

<p>no apples</p>
<p>apple</p>
<p>apples</p>

<p>cars</p>
<p>car</p>
<p>cars</p>

需要注意的是，在没有定义数量为 0 时的表现方式时，会自动用复数型态表示。

结合 Named interpolation

如果你想要字词前面加上数量的话，可以透过 Named interpolation 的方式达到。

在 Vue i18n - Message Format Syntax 中我们有介绍到 Named interpolation ，如果不熟悉的朋友可以参考阅读。

{
  "apple": "no apples | one apple | {count} apples",
  "car": "no cars | {n} car | {n} cars",
}

所以在 template 的写法会是：

<p>{{ $t('apple', 0) }}</p>
<p>{{ $t('apple', 1) }}</p>
<p>{{ $t('apple', 10, { count: 10 }) }}</p>
<p>{{ $t('apple', 10) }}</p>

<p>{{ $t('car', 0) }}</p>
<p>{{ $t('car', 1, { n: 1 }) }}</p>
<p>{{ $t('car', 2) }}</p>

值得注意的是，如果插值的名称是 n 或 count 可以省略不传入。

得到的结果是：

<p>no apples</p>
<p>one apple</p>
<p>10 apples</p>
<p>10 apples</p>

<p>no cars</p>
<p>1 car</p>
<p>2 cars</p>

结合 Linked messages

如果多元化的字词除了会单独使用之外，也总含在其他字句中，我们可以透过 Linked messages 的方式来实现。

在 Vue i18n - Message Format Syntax 中我们有介绍到 Linked messages ，如果不熟悉的朋友可以参考阅读。

{
  "apple": "no apples | one apple | {count} apples",
  "sentence": "I have @:apple",
}

所以在 template 的写法会是：

<p>{{ $t('sentence', 0) }}</p>
<p>{{ $t('sentence', 1) }}</p>
<p>{{ $t('sentence', 10) }}</p>

得到的结果是：

<p>I have no apples</p>
<p>I have one apple</p>
<p>I have 10 apples</p>

参考资料

• Vue I18n 官方文件

今天的分享就到这边，如果大家对我分享的内容有兴趣欢迎点击追踪 & 订阅系列文章，如果对内容有任何疑问，或是文章内容有错误，都非常欢迎留言讨论或指教的！

明天要来分享的是 Vue i18n 主题的第四篇 Component Interpolation，那我们明天见！