Pluriels et select

Les formes plurielles et select couvrent les cas où une seule chaîne source ne suffit pas : la traduction dépend d’un nombre ou d’une catégorie. @lingo.dev/react propose deux helpers simples à utiliser (l.plural et l.select) qui sont compilés en ICU MessageFormat en coulisses ; les traducteurs retrouvent donc la syntaxe standard, tandis que le runtime ne change pas.

Pluriels#

l.plural(count, forms, { context }) choisit la bonne forme en fonction de count et des règles de pluriel CLDR de la langue.

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)

Formes selon la langue#

La table des formes accepte toutes les catégories de pluriel CLDR : zero, one, two, few, many, other. Chaque langue utilise uniquement ce dont elle a besoin :

L’anglais utilise one + other (1 vs tout le reste)
Le russe utilise one + few + many + other (1 ; 2-4 ; 5-20 ; 21, 31, ...)
L’arabe utilise les six
Le japonais utilise uniquement other (pas de distinction de pluriel)

Vous n’avez besoin de fournir que les formes utilisées par la langue source ; les traducteurs ajoutent le reste pour chaque langue cible.

{count} est interpolé automatiquement dans n’importe quelle forme plurielle. Vous n’avez pas à le passer via values : il provient du premier argument.

Combiner avec d’autres placeholders#

Pour les phrases qui combinent un nombre et d’autres variables, écrivez ces variables directement dans les chaînes des formes ; elles seront transmises telles quelles à ICU.

tsx

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

Passez ensuite les valeurs à l’appel — mais attention, la signature de l.plural ne contient que { context }. Pour les cas mixtes, utilisez directement l.text avec la syntaxe plurielle 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",
});

Le jeton # est remplacé tel quel par la valeur du compteur — pratique si vous en avez besoin sans utiliser la forme d’interpolation entre accolades.

Select#

l.select(value, forms, { context }) choisit une forme à partir d’une clé de type chaîne (genre, rôle, type de contenu — bref, toute catégorie).

tsx

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

other est obligatoire comme valeur de repli. La correspondance est exacte : il n’y a ni rapprochement approximatif ni correspondance insensible à la casse.

Selectordinal#

Pour les nombres ordinaux (1er, 2e, 3e), utilisez directement ICU selectordinal via 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, ..."

Ce que cela génère#

l.plural et l.select construisent tous deux une chaîne ICU MessageFormat, puis la transmettent à l.text. C’est cette forme compilée qui est extraite par lingo extract et stockée dans vos fichiers de langue : les traducteurs modifient directement la syntaxe ICU, pas le littéral d’objet JS.

Exemple : l.plural(n, { one: "1 item", other: "{count} items" }, { context: "Cart" }) est extrait sous la forme suivante :

text

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

Les traducteurs peuvent ainsi adapter les catégories à chaque langue, y compris celles que la source n’utilise pas. Le russe devient {count, plural, one {...} few {...} many {...} other {...}} sans aucune modification du code.

Quand ne pas les utiliser#

Un simple booléen « 1 ou plusieurs ». Deux appels à l.text dans un if conviennent très bien et sont plus faciles à repérer pour les traducteurs.
Une énumération interne, non destinée à l’utilisateur. Plural / select servent à la traduction de messages catégoriels, pas à piloter la logique de l’application.

Pour aller plus loin#

useLingo — principes de base de l.text et l.rich.
Formatting — formatage des nombres, devises, dates et listes via Intl natif.