Angular Academy · Leçon

Pluriels et sélection (ICU)

Gérez les pluriels et les formulations genrées

Pluriels et sélection (ICU) est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Pourquoi les espaces réservés simples ne suffisent pas

« You have 1 messages » est incorrect en anglais. Les langues ont des règles de pluriel différentes (certaines possèdent plusieurs formes de pluriel), ainsi que des formulations variant selon le genre ou la catégorie. Angular gère cela avec le format de message ICU : les expressions plural et select.

L’expression plural

Une expression ICU plural choisit la formulation en fonction d’un nombre. Vous répertoriez les cas par catégorie de pluriel et fournissez le texte correspondant à chacun.

<p i18n>{count, plural,
  =0 {No messages}
  =1 {One message}
  other {{{count}} messages}
}</p>

Catégories de pluriel

Les catégories comprennent les correspondances exactes (=0, =1) et les mots-clés CLDR : zero, one, two, few, many et other, qui est obligatoire. Les différentes langues utilisent automatiquement des sous-ensembles différents.

L’espace réservé dièse

Dans un cas de pluriel, # est une abréviation désignant le nombre correspondant, ce qui vous évite de répéter la liaison.

<p i18n>{count, plural,
  =1 {You have one item}
  other {You have # items}
}</p>

L’expression select

select choisit le texte en fonction d’une valeur de chaîne, ce qui convient particulièrement aux catégories comme le genre, le statut ou le type.

<p i18n>{gender, select,
  male {He replied}
  female {She replied}
  other {They replied}
}</p>

other est obligatoire

plural et select nécessitent tous deux une branche other. Elle sert de solution de repli lorsqu’aucun cas précis ne correspond, et Angular signale une erreur si elle est absente.

Combiner avec le texte environnant

Les expressions ICU peuvent être intégrées dans du texte traduit normal. Conservez la phrase complète dans un seul bloc i18n afin que les traducteurs contrôlent l’ordre des mots.

<p i18n>Hi {{ name }}, {count, plural,
  =0 {you have no notifications}
  other {you have # notifications}
}.</p>

Imbriquer select dans plural

Les expressions ICU peuvent être imbriquées, ce qui permet d’exprimer à la fois la quantité et la catégorie lorsque la grammaire l’exige.

{count, plural,
  =0 {No guests}
  other {# {type, select, vip {VIP} other {regular}} guests}
}

Les traducteurs adaptent les catégories

Lors de la traduction, une langue peut ajouter les formes de pluriel nécessaires à sa grammaire (par exemple, le russe utilise one, few et many). La cible XLIFF d’une unité ICU contient les branches traduites.

ICU dans TypeScript avec $localize

La syntaxe ICU fonctionne également dans les chaînes annotées avec $localize, de sorte que la logique de pluriel du code des composants reste elle aussi traduisible.

const label = $localize('{count, plural, =1 {1 file} other {{{count}} files}}');

Pourquoi ICU est préférable à if/else manuel

Le codage en dur de count === 1 ? 'message' : 'messages' suppose des pluriels binaires à l’anglaise. ICU délègue la règle aux données CLDR de chaque langue, afin que les langues comportant trois ou six formes de pluriel s’affichent correctement sans modification du code.

Vérification rapide

Quelle branche ICU est toujours obligatoire ?

Récapitulatif

ICU plural choisit le texte selon le nombre à l’aide de catégories (=0, one, other) et de # pour le compte, tandis que select choisit selon une valeur de chaîne. Les deux nécessitent une branche other, peuvent être librement imbriqués, fonctionnent dans $localize et permettent à chaque langue d’appliquer ses propres règles de pluriel.

Questions Fréquemment Posées

La leçon « Pluriels et sélection (ICU) » est-elle gratuite ?

Oui — le texte complet de « Pluriels et sélection (ICU) » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Pluriels et sélection (ICU) » ?

Gérez les pluriels et les formulations genrées Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Pluriels et sélection (ICU) » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Angular Academy