|Labs
Reservar una demoPlataforma
React (Lingo Compiler)
Alpha
React (MCP)React (i18n)
CLI antiguo (v0)
Obsoleto

Descripción general

  • @lingo.dev/react

Primeros pasos

  • Guía rápida

Referencia

  • LingoProvider
  • useLingo
  • Plurales y select
  • Formato

Plurales y select

Las formas de plural y select se usan cuando una sola cadena de origen no es suficiente: la traducción depende de un número o de una categoría. @lingo.dev/react ofrece dos helpers fáciles de usar (l.plural y l.select) que se compilan internamente a ICU MessageFormat, así que los traductores trabajan con la sintaxis estándar y el runtime sigue siendo el mismo.

Plurales#

l.plural(count, forms, { context }) elige la forma adecuada en función de count y de las reglas de plural de CLDR del idioma.

tsx
const l = useLingo();

l.plural(items.length, {
  one: "1 item",
  other: "{count} items",
}, { context: "Cart summary" });
// → "1 item" (en, count=1) / "5 items" (en, count=5)
// → "1 Eintrag" / "5 Einträge" (de, after translation)

Formas según el idioma#

El mapa de formas acepta todas las categorías de plural de CLDR: zero, one, two, few, many, other. Cada idioma usa las que necesita:

  • El inglés usa one + other (1 frente a todo lo demás)
  • El ruso usa one + few + many + other (1; 2-4; 5-20; 21, 31, ...)
  • El árabe usa las seis
  • El japonés solo usa other (sin distinción de plural)

Solo tienes que proporcionar las formas que usa el idioma de origen; los traductores añaden el resto según el idioma de destino.

{count} se interpola automáticamente dentro de cualquier forma plural. No tienes que pasarlo mediante values; viene del primer argumento.

Combinación con otros marcadores de posición#

Si una frase incluye tanto una cantidad como otras variables, escribe las variables dentro de las cadenas de las formas; se pasarán a ICU.

tsx
l.plural(notifications.length, {
  one: "1 message from {sender}",
  other: "{count} messages from {sender}",
}, { context: "Inbox header" });

Después, pasa los valores al hacer la llamada; pero hay un detalle: la firma de l.plural solo incluye { context }. Para casos mixtos, usa l.text directamente con la sintaxis plural de ICU:

tsx
l.text(`{count, plural, one {1 message from {sender}} other {# messages from {sender}}}`, {
  values: { count: notifications.length, sender: user.name },
  context: "Inbox header",
});

El token # se sustituye por el valor de la cantidad tal cual, lo que resulta útil cuando quieres usarlo sin la interpolación entre llaves.

Select#

l.select(value, forms, { context }) elige una forma a partir de una clave de texto (género, rol, tipo de contenido o cualquier otra categoría).

tsx
l.select(user.gender, {
  male: "He uploaded a photo",
  female: "She uploaded a photo",
  other: "They uploaded a photo",
}, { context: "Activity feed" });

other es obligatorio como alternativa por defecto. La coincidencia es exacta: no hay coincidencias difusas ni distinción flexible entre mayúsculas y minúsculas.

Selectordinal#

Para números ordinales (1.º, 2.º, 3.º), usa ICU selectordinal directamente mediante l.text:

tsx
l.text(`You finished in {place, selectordinal, one {#st} two {#nd} few {#rd} other {#th}} place`, {
  values: { place: rank },
  context: "Leaderboard",
});
// → "You finished in 1st place" / "2nd" / "3rd" / "4th, 5th, ..."

En qué se compila#

Tanto l.plural como l.select generan una cadena en ICU MessageFormat y se la pasan a l.text. La forma compilada es la que extrae lingo extract y la que se guarda en tus archivos de idioma: los traductores editan directamente la sintaxis de ICU, no el literal de objeto de JS.

Ejemplo: l.plural(n, { one: "1 item", other: "{count} items" }, { context: "Cart" }) se extrae así:

text
{count, plural, one {1 item} other {{count} items}}

Esto significa que los traductores pueden adaptar las categorías a cada idioma, incluso cuando el original no las tiene. El ruso pasa a ser {count, plural, one {...} few {...} many {...} other {...}} sin necesidad de cambiar el código.

Cuándo no usar esto#

  • Un simple booleano de "1 o varios". Dos llamadas a l.text dentro de un if funcionan bien y son más fáciles de identificar para los traductores.
  • Un enum interno que no ve el usuario. Plural / select sirve para la traducción de mensajes categóricos, no para controlar la lógica de la aplicación.

Dónde seguir#

  • useLingo — semántica básica de l.text y l.rich.
  • Formatting — formato de números, moneda, fechas y listas con Intl nativo.

¿Te ha resultado útil esta página?

Max PrilutskiyMax Prilutskiy·Actualizado hace alrededor de 1 mes·3 min de lectura