Comment gérer la pluralisation dans React
Pourquoi la pluralisation est importante dans React
Nous rencontrons souvent des applications qui affichent des messages maladroits comme :
Vous avez 1 nouveau message
C’est un signe révélateur d’un développeur qui n’a pas suffisamment réfléchi à l’expérience utilisateur.
Les apps React ont souvent besoin de gérer le pluriel — pour les compteurs de notifications, les longueurs de listes ou les résultats de recherche. Et ce n’est pas si difficile de bien gérer le pluriel, surtout si votre app ne doit fonctionner qu’en anglais. Mais il existe de nombreuses mauvaises pratiques dans lesquelles les nouveaux développeurs tombent, surtout lorsqu’ils construisent des interfaces multilingues.
Ce guide explique comment gérer proprement les pluriels en anglais, formater les nombres pour différentes locales et construire un système de pluriels entièrement multilingue dans React et Next.js.
Le problème des pluriels en dur
De nombreux projets — y compris des projets étonnamment volumineux et importants — intègrent en dur la logique du pluriel.
export default function Example({ n }) {
return (
<p>
Affichage {n === 1 ? "d'un" : `de ${n}`} élément{n === 1 ? '' : 's'}
</p>
)
}Mais la pluralisation est souvent plus complexe que le simple ajout d’un "s" à la fin d’un mot. Certains noms ont des formes plurielles irrégulières, comme "child" et "children". Parfois, d’autres parties de la phrase doivent également changer pour refléter le nom, comme "is" et "are" en fonction du nombre.
Le tableau ci-dessous illustre quelques scénarios courants :
| Scénario | Exemples | Remarques |
|---|---|---|
| Nombre de spectateurs | "1 person is watching" "2 people are watching" | Nom irrégulier ("person" → "people") et changements de verbe requis. |
| Suppression | "Delete this message?" "Delete these 2 messages?" | Changements de démonstrif ("this" vs. "these") plus pluralisation du nom. |
| Résultats de recherche | "No results" "1 result found" "2 results found" | Formulations différentes pour zéro, un et plusieurs résultats. |
L’utilisation d’expressions conditionnelles devient rapidement difficile à gérer.
Et cela devient un véritable cauchemar lorsque vous devez livrer votre application dans d’autres langues. Ce qui fonctionne en anglais se casse souvent complètement dans des langues comme le polonais ou l’arabe, qui ont des règles de gestion des quantités totalement différentes. Les entreprises avec lesquelles nous travaillons repoussent souvent l’internationalisation à cause de la difficulté de remanier du code d’interface utilisateur en dur comme celui-ci.
Comment gérer les pluriels en anglais
En anglais, l’utilisation des bons pluriels dans votre application est généralement assez simple.
Pour la mise au pluriel simple des noms, écrivez une fonction utilitaire :
export function pluralize(
count: number,
singular: string,
plural: string = singular + 's'
) {
return `${count === 1 ? singular : plural}`;
}Désormais, une seule fonction gère toute votre logique de pluriel, et elle prend aussi en charge les pluriels irréguliers :
pluralize(2, 'user') // "users"
pluralize(2, 'person', 'people') // "people"
pluralize(2, 'child', 'children') // "children"Mais que faire si vous avez besoin d’une logique plus complexe, par exemple :
"No one is watching"
"1 person is watching"
"2 personnes regardent"
À ce stade, vous devriez sérieusement envisager une bibliothèque d’internationalisation (« i18n ») nécessitant peu de maintenance.
Même si les développeurs pensent souvent que les bibliothèques i18n ne servent qu’aux interfaces multilingues,
elles peuvent être très utiles pour la gestion des pluriels et le formatage de variables, même dans des applications monolingues.
Sous le capot, la plupart des bibliothèques i18n utilisent l’API intégrée Intl.PluralRules de JavaScript pour déterminer les formes plurielles correctes pour chaque langue.
Il existe de nombreuses bibliothèques i18n pour React, y compris la nôtre, gt-react (ou gt-next si vous utilisez Next.js). Gérer le pluriel en anglais avec gt-react est simple :
import { Plural } from 'gt-react'
function Example({ count }) {
return (
<Plural n={count} zero={'Personne ne regarde'} one={`${count} personne regarde`}>
{count} personnes regardent
</Plural>
)
}L'interface utilisateur est rendue de manière conditionnelle en fonction de la valeur de n.
La plupart des bibliothèques utilisent l'API JavaScript Intl.PluralRules pour décider quelle forme plurielle afficher.
Cela signifie qu'en anglais, vous utiliseriez la clé "one" pour faire référence au singulier et "other" pour faire référence au pluriel.
Notre composant <Plural> se rabat sur ses enfants si le nombre fourni à n ne correspond à aucune des props passées.
Utiliser une bibliothèque ici est une bonne pratique, même pour les applications uniquement en anglais, et facilite grandement une future internationalisation.
Pluralisation dans les applications React multilingues (i18n)
Si votre application ne s’adresse qu’à des utilisateurs anglophones, l’approche ci‑dessus peut suffire — mais la plupart des applications en production finissent généralement par devoir prendre en charge plusieurs langues. C’est là que les choses deviennent intéressantes.
- En arabe, les noms ont des formes différentes selon qu’il y en a zéro, un, deux ou plusieurs
- En espagnol, en allemand et en italien, les grands nombres utilisent des points au lieu de virgules, donc 1,000,000 devient 1.000.000
- En hindi, les chiffres sont groupés par paires, donc 1,000,000 devient 10,00,000
Pour une application internationalisée, vous devriez utiliser une bibliothèque i18n dédiée, qui disposera de sa propre documentation sur la gestion des pluriels et le formatage des nombres.
Mise en forme des nombres pour différentes locales
Vous pouvez utiliser l’objet Intl pour formater des nombres pour n’importe quelle locale.
La façon la plus simple de le faire est d’utiliser la méthode intégrée toLocaleString().
Par défaut, cela utilisera la locale actuelle au moment de l’exécution :
const n = 1000000
n.toLocaleString() // affiche 1 000 000 lorsque la locale d'exécution est « en-US » (anglais américain)
n.toLocaleString('de') // 1.000.000 car la locale a été spécifiée en tant que « de » (allemand)gt-react propose également un composant <Num> qui s'appuie sur Intl.NumberFormat en interne.
import { Num } from 'gt-react'
// affiche 1 000 000 lorsque la langue est « en-US »
// affiche 1.000.000 lorsque la langue est « de »
// affiche 10,00,000 lorsque la langue est « hi »
export default function Example() {
return <Num>1000000</Num>
}Comprendre les formes plurielles dans les différentes langues
Les six formes plurielles prises en charge par l'API Intl.PluralRules de JavaScript sont : zero, one, two, few, many, other.
Bien que l’anglais n’utilise que one (« singulier ») et other (« pluriel »),
des langues comme l’arabe et le polonais en définissent davantage.
Par exemple, un utilisateur anglophone pourrait s’attendre à :
"No one is watching"
"1 person is watching"
"2 personnes regardent"
Alors qu’un utilisateur arabophone peut s’attendre à des expressions différentes pour le singulier, le duel (lorsque le nombre est exactement de deux éléments), ainsi que pour les formes de pluriel restreint et étendu :
"لا أحد يشاهد"
"1 شخص يشاهد"
"2 شخصان يشاهدان"
"3 أشخاص يشاهدون"
"11 شخصاً يشاهدون"
C'est là qu'une bibliothèque d'internationalisation devient essentielle. Chaque langue a sa propre logique pour savoir quand et comment gérer les pluriels, il vaut donc mieux s'appuyer sur une bibliothèque dédiée pour ne pas faire d'erreur.
Une bonne bibliothèque i18n fera deux choses :
- Déterminer quelle forme de pluriel (
one,many,other, etc.) utiliser en fonction de la locale - Trouver la traduction dans la bonne langue qui correspond à cette forme
Si vous utilisez déjà une bibliothèque d'internationalisation, consultez sa documentation pour obtenir des informations sur le formatage des pluriels. Presque toutes les bibliothèques disposent d'une documentation dédiée au rendu des pluriels.
Exemple complet : pluriels dans une application React multilingue
Si vous n'avez pas encore de bibliothèque d'internationalisation, pensez à gt-react !
Le composant <Plural> de gt-react :
- Propose une manière simple et déclarative d'afficher correctement les pluriels dans React
- Fonctionne nativement avec le composant de formatage
<Num> - Fonctionne nativement avec le composant de traduction
<T>, qui s'intègre à notre service de traduction gratuit pour générer automatiquement les formes plurielles
En assemblant tous les éléments, voici un composant multilingue complet :
import { T, Plural, Num } from 'gt-react'
// Fonctionne immédiatement dans plus de 100 langues
function Example({ count }) {
return (
<T>
<Plural
n={count}
zero={'Personne ne regarde'}
one={
<>
<Num>{count}</Num> personne regarde
</>
}
>
<Num>{count}</Num> personnes regardent
</Plural>
</T>
)
}Prochaines étapes
Prêt à gérer correctement les pluriels dans votre application React ? Consultez nos guides de prise en main :
- gt-react quickstart pour les applications React
- gt-next quickstart pour les applications Next.js
- Référence de l’API
<Plural>pour l’API complète du composant
La pluralisation est l’un des défis i18n les plus courants dans React : bien la maîtriser dès le départ permet d’éviter d’importantes refactorisations par la suite.