复数形式

要进行消息本地化，您可能需要支持某些语言的复数形式。

Vue i18n 支持复数形式，您可以使用具有复数功能的翻译 API。

基本用法

您需要定义具有管道符 | 分隔符的语言环境消息，并在管道分隔符中定义复数。

以下语言环境消息：

const messages = {
  en: {
    car: 'car | cars',
    apple: 'no apples | one apple | {count} apples'
  }
}

在这里，我们有一个 en 语言环境对象，包含 car 和 apple。

car 具有 car | cars 复数消息，而 apple 具有 no apples | one apple | {count} apples 复数消息。

这些复数消息根据您在翻译 API 中指定的数值，按照每种语言的选择规则逻辑进行选择。

Vue I18n 提供了一些支持复数形式的方法。这里我们将使用 $t。

TIP

$t 有一些重载。关于这些重载，请参见 API 参考

NOTE

支持复数形式的一些方法包括：

• 注入的全局 $t
• 内置 Translation 组件（i18n-t）
• 从 useI18n 导出的 t（用于组合 API 模式）

以下是使用翻译 API 的示例。

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

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

在上面使用 $t 的示例中，第一个参数是语言环境消息键，第二个参数是数字。$t 返回选择的消息作为结果。

结果如下：

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

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

预定义的隐式参数

您无需显式提供用于复数形式的数字。

让我们看一个例子来理解这意味着什么！

以下语言环境消息：

const messages = {
  en: {
    apple: 'no apples | one apple | {count} apples',
    banana: 'no bananas | {n} banana | {n} bananas'
  }
}

在这里，我们有一个 en 语言环境对象，包含 apple 和 banana。

apple 具有 no apples | one apple | {count} apples 复数消息，而 banana 具有 no bananas | {n} banana | {n} bananas 复数消息。

数字可以通过预定义的命名参数 {count} 和/或 {n} 在语言环境消息中访问。如有必要，您可以覆盖这些预定义的命名参数。

以下是使用 $t 的示例：

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

<p>{{ $t('banana', 1, { named: { n: 1 } }) }}</p>
<p>{{ $t('banana', 1) }}</p>
<p>{{ $t('banana', 100, { named: { n: 'too many' } }) }}</p>

在上述一些示例中，第一个参数是语言环境消息键，第二个参数是数值或对象。

如果指定了对象，则等价于命名插值。通过提供它，您可以使用复数消息中隐式的 n 或 count 参数进行插值。

结果如下：

<p>10 apples</p>
<p>10 apples</p>

<p>1 banana</p>
<p>1 banana</p>
<p>too many bananas</p>

自定义复数形式

然而，这种复数形式并不适用于所有语言（例如斯拉夫语言具有不同的复数规则）。

要实现这些规则，您可以将可选的 pluralizationRules 对象传递给 VueI18n 构造器选项。

使用斯拉夫语言（俄语、乌克兰语等）规则的简化示例：

function customRule(choice, choicesLength, orgRule) {
  if (choice === 0) {
    return 0
  }

  const teen = choice > 10 && choice < 20
  const endsWithOne = choice % 10 === 1
  if (!teen && endsWithOne) {
    return 1
  }
  if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {
    return 2
  }

  return choicesLength < 4 ? 2 : 3
}

要使用上面定义的自定义规则，在 createI18n 中设置：

1. pluralizationRules（用于选项 API） 或者
2. pluralRules（用于组合 API）

像以下语言环境一样：

const i18n = createI18n({
  locale: 'ru',
  // 使用 pluralRules 用于组合 API
  pluralizationRules: {
    ru: customRule
  },
  messages: {
    ru: {
      car: '0 машин | {n} машина | {n} машины | {n} машин',
      banana: 'нет бананов | {n} банан | {n} банана | {n} бананов'
    }
  }
})

使用以下模板：

<h2>Car:</h2>
<p>{{ $t('car', 1) }}</p>
<p>{{ $t('car', 2) }}</p>
<p>{{ $t('car', 4) }}</p>
<p>{{ $t('car', 12) }}</p>
<p>{{ $t('car', 21) }}</p>

<h2>Banana:</h2>
<p>{{ $t('banana', 0) }}</p>
<p>{{ $t('banana', 4) }}</p>
<p>{{ $t('banana', 11) }}</p>
<p>{{ $t('banana', 31) }}</p>

结果如下：

<h2>Car:</h2>
<p>1 машина</p>
<p>2 машины</p>
<p>4 машины</p>
<p>12 машин</p>
<p>21 машина</p>

<h2>Banana:</h2>
<p>нет бананов</p>
<p>4 банана</p>
<p>11 бананов</p>
<p>31 банан</p>