Mensajes en singular y plural

Introducción

Algunos mensajes de nuestra aplicación deberán variar de singular a plural según el contexto en que se muestren.

Un casi típico es el mensaje que mostramos para indicar el número de productos que tenemos en el carrito:

Tiene 1 producto en su carrito de la compra

Tiene 5 productos en su carrito de la compra

Vamos a ver como se define este mensaje y sus traducciones:

...
'cart.itemsQuantity': Array<string>
...

...
'cart.itemsQuantity': ['Tiene 1 producto en su carrito de la compra', 'Tiene {0} productos en su carrito de la compra'],
...

Ahora vemos como le pasamos los valores para que se muestren en los “placehoders” del mensaje:

...
{t('cart.itemsQuantity', cart.items.length)}
...

Como vemos arriba, usamos el mismo método que para mostrar un mensaje simple, pero le pasamos como parámetro un valor numérico que usa para 2:

1. Para identificar que mensaje debe usar: singular si el valor es 1, o plural si es superior a 1.
2. Para mostrar en el “placeholder” {0}

Singular y plural con parámetros adicionales

Puede ser que aparte del valor de cantidad que nos sirve para identificar que mensaje mostrar, también necesitemos mostrar otro valor en el mensaje. Por ejemplo:

Tiene 1 Heineken (33 L.) en la lista de la compra

Tiene 5 Heineken (33 L.) en la lista de deseos

...
'whislist.customItemsMessage': Array<string>
...

```javascript title="packages/i18n/src/locales/es.ts"
...
'whislist.customItemsMessage': ['Tiene 1 {1} en su lista de deseos', 'Tiene {0} {1} en su lista de deseos'],
...

...
{t('whislist.customItemsMessage', whilist.items.length, product.name)}
...

Como vemos arriba, usamos el mismo método que el ejemplo anterior, pero además pasamos un parámetro adicional que es el que se usa para mostrar el valor en el “placeholder” {1}.