0Pricing
React Academy · Lección

Pluralización e interpolación

Gestione las formas plurales según cantidades e inserte valores dinámicos en cadenas traducidas.

Pluralización e interpolación es una lección gratuita de React Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Bienvenida

En esta lección gestionará las formas plurales basadas en cantidades e insertará valores dinámicos en cadenas traducidas mediante la interpolación y la compatibilidad con plurales de i18next.

Conceptos básicos de la interpolación

Utilice llaves dobles en las cadenas de traducción como marcadores de posición. Pase un objeto con los valores de las variables como segundo argumento de t().
// JSON: "greeting": "Hello, {{name}}!"
t('greeting', { name: 'Alice' }); // Hello, Alice!

Varias variables de interpolación

Puede utilizar tantas variables de interpolación como necesite en una sola cadena.
// JSON: "summary": "You have {{count}} messages in {{folder}}"
t('summary', { count: 5, folder: 'Inbox' });
// You have 5 messages in Inbox

Escape de HTML

De forma predeterminada, i18next escapa los caracteres HTML de los valores interpolados. Para renderizar HTML dentro de un valor interpolado, establezca `escapeValue: false` en la configuración de inicialización (en React ya es seguro, porque React escapa el JSX).

Formas plurales

i18next admite automáticamente las formas plurales. Defina `key` para el singular y `key_other` (o `key_plural`) para el plural. Pase `count` en el objeto de interpolación.
// JSON:
// "item": "{{count}} item"
// "item_other": "{{count}} items"

t('item', { count: 1 }); // 1 item
t('item', { count: 5 }); // 5 items

Reglas de pluralización específicas de cada idioma

Cada idioma tiene reglas de pluralización diferentes. El ruso tiene 4 formas plurales y el árabe, 6. i18next utiliza automáticamente las reglas Unicode CLDR de cada idioma. Defina todas las formas necesarias en el archivo de traducción.
// Russian (ru):
// key_one, key_few, key_many, key_other

Forma cero

i18next también admite una forma especial `key_zero` cuando count es 0, lo que permite utilizar una redacción diferente (por ejemplo, «No hay elementos» en lugar de «0 elementos»).
// JSON:
// "messages_zero": "No messages"
// "messages_one": "{{count}} message"
// "messages_other": "{{count}} messages"

t('messages', { count: 0 }); // No messages

Claves anidadas con plurales

Puede tener claves plurales dentro de objetos anidados. Utilice la notación de puntos para acceder a ellas, igual que con las claves anidadas normales.
// JSON: { "cart": { "items_one": "item", "items_other": "items" } }
t('cart.items', { count: 3 }); // items

Formato de fechas y números

i18next se integra con la API Intl para aplicar formatos de fechas y números según la configuración regional. Utilice i18n.format() o el complemento intlify para formatear fechas como parte de las traducciones.
t('lastSeen', { date: new Date(), formatParams: {
  date: { month: 'long', day: 'numeric' }
}});

Traducciones basadas en el contexto

Utilice la opción `context` para las formas gramaticalmente diferentes según el contexto (por ejemplo, palabras con género). Defina las variantes `key_male` y `key_female` en el archivo de traducción.
// JSON: { "hero_male": "Hero", "hero_female": "Heroine" }
t('hero', { context: 'female' }); // Heroine

Comprobación rápida

¿Cómo se pasa un valor dinámico llamado 'username' a una cadena de traducción con i18next?

Resumen

Utilice {{variable}} para la interpolación, key_other/key_one para los plurales y key_zero para las formas correspondientes a cero. i18next aplica automáticamente las reglas de pluralización Unicode CLDR de cada idioma. Utilice context para las variantes gramaticales.

A continuación

Siguiente lección: **Selector de idioma y carga diferida de traducciones** — creará un selector de configuración regional y cargará los paquetes de traducción bajo demanda.

Preguntas frecuentes

¿La lección «Pluralización e interpolación» es gratis?

Sí — el texto completo de «Pluralización e interpolación» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Pluralización e interpolación»?

Gestione las formas plurales según cantidades e inserte valores dinámicos en cadenas traducidas. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Pluralización e interpolación»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Configurar react-i18next
  2. Utilizar el hook useTranslation
  3. Pluralización e interpolación
  4. Selector de idioma y carga diferida de traducciones
← Volver a React Academy