Pluralización

Para localizar el mensaje, es posible que necesites admitir la pluralización para algunos idiomas.

Vue i18n admite pluralización, puedes utilizar la API de traducción con función de pluralización.

Uso básico

Necesitas definir los mensajes locales que tienen un separador de tubería | y definir las plurales en el separador de tubería.

Los mensajes locales a continuación:

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

Aquí, tenemos un objeto de configuración regional en que tiene car y apple.

El car tiene un mensaje de pluralización car | cars, mientras que el apple tiene un mensaje de pluralización no apples | one apple | {count} apples.

Estos mensajes plurales son seleccionados por la lógica de la regla de elección para cada idioma en la API de traducción según el valor numérico que especifiques en la API de traducción.

Vue I18n ofrece algunas formas de admitir la pluralización. Aquí usaremos $t.

TIP

$t tiene algunas sobrecargas. Sobre estas sobrecargas, vea la Referencia de API

NOTE

Algunas formas de admitir la pluralización son:

• $t inyectado globalmente
• Componente de traducción incorporado (i18n-t)
• t exportado desde useI18n (para el modo de API de Composición)

El siguiente es un ejemplo del uso de la API de traducción.

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

En el ejemplo anterior de uso de $t, el primer argumento es la clave de los mensajes locales y el segundo argumento es un número. $t devuelve el mensaje de elección como resultado.

Como resultado a continuación:

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

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

Argumentos implícitos predefinidos

No necesitas proporcionar explícitamente el número para la pluralización.

Miremos un ejemplo para entender lo que eso significa.

Los mensajes locales a continuación:

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

Aquí, tenemos un objeto de configuración regional en que tiene apple y banana.

El apple tiene un mensaje de pluralización no apples | one apple | {count} apples, y el banana tiene un mensaje de pluralización no bananas | {n} banana | {n} bananas.

El número puede accederse dentro de los mensajes locales mediante los argumentos predefinidos llamados {count} y/o {n}. Puedes sobrescribir estos argumentos predefinidos si es necesario.

El siguiente es un ejemplo del uso 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>

En algunos ejemplos anteriores, el primer argumento es la clave de los mensajes locales y el segundo argumento es el valor numérico u objeto.

Si se especifica un objeto, es equivalente a la interpolación con nombre. Puedes interpolar n o count con argumentos implícitos en el mensaje de pluralización proporcionándolos.

Como resultado a continuación:

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

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

Pluralización personalizada

Sin embargo, esta pluralización no aplica a todos los idiomas (por ejemplo, los idiomas eslavos tienen diferentes reglas de pluralización).

Para implementar estas reglas puedes pasar un objeto opcional pluralizationRules en las opciones del constructor VueI18n.

Ejemplo muy simplificado usando reglas para idiomas eslavos (ruso, ucraniano, 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
}

Para usar las reglas personalizadas definidas anteriormente, dentro de createI18n establece:

1. pluralizationRules (para la API de Opciones) o
2. pluralRules (para la API de Composición)

como el siguiente idioma:

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

Con la siguiente plantilla:

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

Como resultado a continuación:

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