Pluralisation

Pour localiser un message, vous devrez peut-être prendre en charge la pluralisation pour certaines langues.

Vue i18n prend en charge la pluralisation, vous pouvez utiliser l'API de traduction qui possède une fonctionnalité de pluralisation.

Utilisation de base

Vous devez définir les messages locaux qui ont un séparateur管道 | et définir les pluriels dans ce séparateur.

Les messages locaux ci-dessous :

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

Ici, nous avons un objet de locale en qui contient car et apple.

Le car a un message de pluralisation car | cars, tandis que apple a un message de pluralisation no apples | one apple | {count} apples.

Ces messages de pluralisation sont sélectionnés par la logique des règles de choix pour chaque langue dans l'API de traduction selon la valeur numérique que vous spécifiez dans l'API de traduction.

Vue I18n propose plusieurs façons de supporter la pluralisation. Ici, nous utiliserons $t.

TIP

$t a plusieurs surcharges. À propos de ces surcharges, voir la Référence de l'API

NOTE

Certaines façons de supporter la pluralisation sont :

• $t injecté globalement
• Composant de traduction intégré (i18n-t)
• t exporté depuis useI18n (mode API de composition)

L'exemple suivant montre l'utilisation de l'API de traduction.

<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>

Dans l'exemple ci-dessus d'utilisation de $t, le premier argument est la clé des messages locaux et le deuxième argument est un nombre. $t retourne le message choisi comme résultat.

Ce qui donne comme résultat :

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

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

Arguments implicites prédéfinis

Vous n'avez pas besoin de donner explicitement le nombre pour la pluralisation.

Regardons un exemple pour comprendre ce que cela signifie !

Les messages locaux ci-dessous :

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

Ici, nous avons un objet de locale en qui contient apple et banana.

L'apple a un message de pluralisation no apples | one apple | {count} apples, et banana a un message de pluralisation no bananas | {n} banana | {n} bananas.

Le nombre peut être accessible dans les messages locaux via des arguments nommés prédéfinis {count} et/ou {n}. Vous pouvez surcharger ces arguments nommés prédéfinis si nécessaire.

L'exemple suivant montre l'utilisation de $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>

Dans les exemples ci-dessus, le premier argument est la clé des messages locaux et le deuxième argument est la valeur numérique ou un objet.

Si un objet est spécifié, c'est équivalent à l'interpolation nommée. Vous pouvez interpoler n ou count avec les arguments implicites dans le message de pluralisation en les donnant.

Ce qui donne comme résultat :

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

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

Pluriel personnalisé

Cette pluralisation ne s'applique pas à toutes les langues (les langues slaves, par exemple, ont différentes règles de pluralisation).

Pour implémenter ces règles, vous pouvez passer un objet optionnel pluralizationRules dans les options du constructeur VueI18n.

Exemple simplifié utilisant les règles pour les langues slaves (russe, ukrainien, etc.) :

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
}

Pour utiliser les règles personnalisées définies ci-dessus, à l'intérieur de createI18n définissez soit :

1. pluralizationRules (pour l'API Options) ou
2. pluralRules (pour l'API de composition)

comme dans le locale suivant :

const i18n = createI18n({
  locale: 'ru',
  // use pluralRules for Composition api
  pluralizationRules: {
    ru: customRule
  },
  messages: {
    ru: {
      car: '0 машин | {n} машина | {n} машины | {n} машин',
      banana: 'нет бананов | {n} банан | {n} банана | {n} бананов'
    }
  }
})

Avec le template suivant :

<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>

Ce qui donne comme résultat :

<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>