Saltar al contenido principal

Declaración de mensajes

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Aunque puedes declarar tus mensajes usando únicamente ids, recomendamos encarecidamente declarar los defaultMessages en línea junto con sus usos por las siguientes razones:

  1. Los mensajes colocados junto a sus usos se autogestionan: a medida que sus usos cambian o se eliminan, también lo hacen los mensajes.

  2. Los mensajes son altamente contextuales. Hemos visto numerosos casos donde los desarrolladores asumen cierta gramática al redactar mensajes. Los botones/llamadas a la acción y las etiquetas se traducen de manera diferente.

  3. El estilo del texto también depende del mensaje mismo. Aspectos como truncamiento, uso de mayúsculas... afectan directamente los mensajes.

  4. Mejor integración con herramientas. La mayoría de los ecosistemas no pueden verificar referencias cruzadas entre archivos para validar sintaxis/uso.

En términos generales, los mensajes de formatjs utilizan Sintaxis ICU con algunas mejoras comunes en otros formatos como Fluent. Esta sección se centra en las formas reales de invocar las APIs de formatjs para extraer mensajes.

Uso de la API imperativa intl.formatMessage​

// Method must be exactly `intl.formatMessage`
intl.formatMessage(
  {
    description: 'A message', // Description should be a string literal
    defaultMessage: 'My name is {name}', // Message should be a string literal
  },
  {
    name: userName,
  } // Values should be an object literal, but not necessarily every value inside
)

Uso de la API de React <FormattedMessage/>​

import {FormattedMessage} from 'react-intl'
;<FormattedMessage
  description="A message" // Description should be a string literal
  defaultMessage="My name is {name}" // Message should be a string literal
  values={
    {
      name: userName,
    } // Values should be an object literal, but not necessarily every value inside
  }
/>

Uso de la API de Vue y métodos de plantilla como $formatMessage​

<template>
  <p>{{ $formatNumber(3, {style: 'currency', currency: 'USD'}) }}</p>
</template>

Predeclaración mediante defineMessage para uso posterior (menos recomendado)​

import {defineMessage} from 'react-intl'
const message = defineMessage({
  description: 'A message', // Description should be a string literal
  defaultMessage: 'My name is {name}', // Message should be a string literal
})

intl.formatMessage(message, {name: 'John'}) // My name is John

<FormattedMessage
  {...message}
  values={{
    name: 'John',
  }}
/> // My name is John
precaución

Dependemos del AST para extraer mensajes del código base, así que asegúrate de invocar intl.formatMessage(), usar nuestros componentes React integrados, emplear nuestros métodos Vue o configurar --additionalFunctionNames/--additionalComponentNames en nuestra CLI correctamente.

precaución

Puedes declarar un mensaje sin formatearlo inmediatamente con defineMessage y nuestro extractor aún podrá extraerlo. Sin embargo, nuestra regla de linter enforce-placeholders no podrá analizarlo.