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.
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.
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:
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).
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:
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í:
{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.textdentro de uniffuncionan 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.textyl.rich. - Formatting — formato de números, moneda, fechas y listas con Intl nativo.
