Plurales y select (ICU)
Gestionar plurales y texto con género
Plurales y select (ICU) es una lección gratuita de Angular 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 Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Por qué los marcadores simples no son suficientes
"You have 1 messages" es incorrecto en inglés. Los idiomas tienen reglas de pluralización diferentes (algunos tienen varias formas plurales), además de expresiones condicionadas por el género o la categoría. Angular gestiona esto con el formato de mensajes ICU: expresiones plural y select.
La expresión plural
Un plural de ICU elige el texto según un número. Debe enumerar los casos por categoría gramatical y proporcionar el texto correspondiente a cada uno.
<p i18n>{count, plural,
=0 {No messages}
=1 {One message}
other {{{count}} messages}
}</p>Categorías de pluralización
Las categorías incluyen coincidencias exactas (=0, =1) y palabras clave de CLDR: zero, one, two, few, many y la obligatoria other. Cada configuración regional utiliza automáticamente un subconjunto diferente.
El marcador de posición hash
Dentro de un caso plural, # es una abreviatura del número que se está comparando, por lo que no es necesario repetir el binding.
<p i18n>{count, plural,
=1 {You have one item}
other {You have # items}
}</p>La expresión select
select elige el texto según un valor de cadena, lo que resulta ideal para categorías como género, estado o tipo.
<p i18n>{gender, select,
male {He replied}
female {She replied}
other {They replied}
}</p>other es obligatorio
Tanto plural como select requieren una rama other. Es la alternativa que se utiliza cuando no coincide ningún caso específico, y Angular genera un error si falta.
Combinar con el texto circundante
Las expresiones ICU pueden aparecer dentro de texto traducido normal. Mantenga la oración completa en un único bloque i18n para que los traductores controlen el orden de las palabras.
<p i18n>Hi {{ name }}, {count, plural,
=0 {you have no notifications}
other {you have # notifications}
}.</p>Anidar select dentro de plural
Las expresiones ICU pueden anidarse, lo que permite expresar conjuntamente la cantidad y la categoría cuando la gramática lo exige.
{count, plural,
=0 {No guests}
other {# {type, select, vip {VIP} other {regular}} guests}
}Los traductores ajustan las categorías
Durante la traducción, una configuración regional puede añadir las formas plurales que necesita su gramática (por ejemplo, el ruso usa one, few y many). El destino XLIFF de una unidad ICU contiene las ramas localizadas.
ICU en TypeScript con $localize
La sintaxis ICU también funciona dentro de cadenas etiquetadas con $localize, por lo que la lógica de pluralización del código de los componentes también puede traducirse.
const label = $localize('{count, plural, =1 {1 file} other {{{count}} files}}');Por qué ICU supera al if/else manual
Codificar count === 1 ? 'message' : 'messages' supone una pluralización binaria al estilo del inglés. ICU delega la regla en los datos CLDR de cada configuración regional, de modo que los idiomas con tres o seis formas plurales se muestran correctamente sin cambios en el código.
Comprobación rápida
¿Qué rama de ICU es siempre obligatoria?
Resumen
ICU plural elige el texto según el número mediante categorías (=0, one, other) y utiliza # para indicar la cantidad, mientras que select elige según un valor de cadena. Ambas requieren una rama other, pueden anidarse libremente, funcionan en $localize y permiten que cada configuración regional aplique sus propias reglas de pluralización.
Preguntas frecuentes
¿La lección «Plurales y select (ICU)» es gratis?
Sí — el texto completo de «Plurales y select (ICU)» 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 Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Plurales y select (ICU)»?
Gestionar plurales y texto con género Practicas Angular 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 Angular Academy?
No se requiere experiencia previa. Angular 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 «Plurales y select (ICU)»?
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 Angular Academy?
Sí. Cada lección de Angular 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
- Marcar texto para su traducción
- Extraer y traducir mensajes
- Plurales y select (ICU)
- Crear bundles localizados