Pasar valores a un mensaje

Introducción

Algunos mensajes de nuestra aplicación, necesitarán recibir algún valor para mostrar en el texto.

Un ejemplo muy claro es cuando mostramos el mensaje después de añadir un producto al carrito de la compra.

Has añadido (3) Heineken (0,33 L) a tu carrito de compras

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

packages/i18n/src/types.ts
...
'cart.addToCart': string
...
packages/i18n/src/locales/es.ts
...
'cart.addToCart': 'Has añadido ({0}) {1} a tu carrito de compras',
...

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

...
  addSuccess(t('cart.addToCart', `${quantity}`, `${productToAdd.name}`))
...

Como vemos arriba, usamos el mismo método que para mostrar un mensaje simple, pero le pasamos los valores que queremos mostrar por orden como parámetros. El método substituirá el “placeholder” {0} por el valor del primer parámetro y el “placeholder” {1} por el valor del segundo.

Podemos usar tantos “placeholders” como necesitemos, además estos se pueden repetir y serán substituidos por su valor en los distintos sitios donde aparezcan.