# General Translation Knowledge Base: Comment gérer les formes plurielles dans React ? URL: https://generaltranslation.com/fr/kb/how-to-handle-plurals-in-react.mdx Docs index: https://generaltranslation.com/llms.txt Description: Ne codez pas en dur la logique de pluralisation avec des tests comme n === 1. Un petit utilitaire suffit pour une application uniquement en anglais, mais une application multilingue a besoin de règles de pluriel adaptées au paramètre régional, que prend en charge pour chaque langue un composant i18n tel que `` de gt-react ou gt-next. Category: Formatage selon les paramètres régionaux Last updated: 2025-02-17 Authors: Archie McKenzie Published: 2025-02-17 ## Video The video is narrated in English, with English captions. [How do I handle plurals in React?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-how-to-handle-plurals-in-react.mp4) (48 s) General Translation handles plurals in React with the `Plural` component. Run `npx gt init` and sign in, give `Plural` the count and an English sentence for each form, wrap it in a `T` component with the count in `Num`, then run `npx gt translate` to write the forms each language needs. ## Pourquoi la pluralisation est importante dans React On croise souvent des applications qui affichent des messages maladroits comme : ```text Vous avez 1 nouveau(x) message(s) ``` C'est le signe révélateur d'un développeur qui n'a pas vraiment réfléchi à l'expérience utilisateur. Les applications React doivent souvent gérer la pluralisation, que ce soit pour le nombre de notifications, la longueur des listes ou les résultats de recherche. **Et bien gérer la pluralisation n'a rien de très compliqué, surtout si votre application n'existe qu'en anglais.** Pourtant, les développeurs débutants tombent dans bien des pièges, en particulier lorsqu'ils conçoivent des interfaces multilingues. Ce guide explique comment gérer proprement les formes plurielles en anglais, formater les nombres selon les paramètres régionaux et mettre en place un système de pluralisation entièrement multilingue dans React et Next.js. ### Le problème des formes plurielles codées en dur De nombreux projets — y compris des projets étonnamment vastes et importants — codent en dur leur logique de pluralisation. ```jsx export default function Example({ n }) { return (

Displaying {n} item{n === 1 ? '' : 's'}

) } ``` Mais la pluralisation est souvent plus complexe que le simple ajout d'un "s" à la fin d'un mot. Certains noms ont des formes du pluriel irrégulières, comme "child" et "children". Parfois, d'autres parties de la phrase doivent aussi s'accorder avec le nom, comme "is" et "are" selon le nombre. Le tableau ci-dessous présente quelques cas courants : | Scénario | Exemples | Notes | | -------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | | Nombre de spectateurs | "1 person is watching"
"2 people are watching" | Nom irrégulier ("person" → "people") et accord du verbe nécessaires. | | Suppression d'éléments | "Delete this message?"
"Delete these 2 messages?" | Changement du démonstratif ("this" ou "these") en plus de la pluralisation du nom. | | Résultats de recherche | "No results"
"1 result found"
"2 results found" | Formulation différente pour zéro, un et plusieurs résultats. | Les expressions conditionnelles deviennent vite ingérables. Et cela tourne au cauchemar dès que vous devez publier votre application dans d'autres langues. Ce qui fonctionne en anglais ne fonctionne souvent plus du tout dans des langues comme le polonais ou l'arabe, qui obéissent à des règles totalement différentes pour exprimer les quantités. **Les entreprises avec lesquelles nous travaillons repoussent souvent l'internationalisation tant il est pénible de refactoriser une IU codée en dur comme celle-ci.** *** ## Comment gérer les formes plurielles en anglais En anglais, employer les bonnes formes plurielles dans votre application est généralement simple. Pour la pluralisation simple des noms, écrivez une fonction utilitaire : ```jsx 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 pluralisation, y compris pour les formes plurielles irrégulières : ```js 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 : ```text "No one is watching" "1 person is watching" "2 people are watching" ``` À ce stade, il est temps d’envisager sérieusement une bibliothèque d’internationalisation (« i18n ») peu contraignante à maintenir. Si les développeurs pensent souvent que les bibliothèques i18n ne servent qu’aux interfaces multilingues, elles peuvent pourtant s’avérer très utiles pour le formatage des pluriels et des variables, même dans une application monolingue. En interne, la plupart des bibliothèques i18n s’appuient sur l’API native `Intl.PluralRules` de JavaScript pour déterminer la forme du pluriel adaptée à chaque langue. Il existe de nombreuses bibliothèques i18n pour React, dont la nôtre, [`gt-react`](/docs/react/overview) (ou [`gt-next`](/docs/react/nextjs-quickstart) si vous utilisez Next.js). Afficher un pluriel anglais avec gt-react est très simple : ```jsx import { Plural } from 'gt-react' function Example({ count }) { return ( {count} people are watching ) } ``` L’IU est affichée de manière conditionnelle selon la valeur de `n`. La plupart des bibliothèques utilisent l’API [`Intl.PluralRules`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules) de JavaScript pour déterminer quelle forme du pluriel afficher. Ainsi, en anglais, on utilise le nom `"one"` pour désigner le singulier et `"other"` pour désigner le pluriel. Notre composant [``](/docs/react/reference/components/plural) vérifie d’abord la catégorie de pluriel exacte, puis les props génériques `plural` et `other`. Il ne se rabat sur ses éléments enfants que si aucune de ces props n’est disponible. Recourir à une bibliothèque est ici une bonne pratique, même pour une application 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 tôt ou tard par devoir prendre en charge plusieurs langues. C’est là que les choses se compliquent. * En arabe, les noms prennent des formes différentes selon qu’il y en a zéro, un, deux ou plusieurs * Dans des paramètres régionaux tels que `de-DE`, `es-ES` et `it-IT`, les grands nombres utilisent des points au lieu de virgules : 1,000,000 devient ainsi 1.000.000 * En hindi, les chiffres sont regroupés par paires : 1,000,000 devient ainsi 10,00,000 **Pour une application internationalisée, mieux vaut utiliser une bibliothèque d’i18n dédiée**, dont la documentation explique comment gérer les formes plurielles et le formatage des nombres. ### Formater les nombres selon les paramètres régionaux Vous pouvez utiliser l’objet `Intl` pour [formater des nombres](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) selon n’importe quel paramètre régional. Le plus simple est d’utiliser la méthode intégrée `toLocaleString()`. Par défaut, elle utilise le paramètre régional actuel de l’environnement d’exécution : ```javascript const n = 1000000 n.toLocaleString() // affiche 1,000,000 lorsque le paramètre régional de l'environnement d'exécution est « en-US » (anglais américain) n.toLocaleString('de') // 1.000.000, car le paramètre régional spécifié est « de » (allemand) ``` gt-react propose également un composant [``](/docs/react/reference/components/num), qui s'appuie en interne sur `Intl.NumberFormat`. ```jsx 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 1000000 } ``` ### Comprendre les formes du pluriel selon les langues Les six formes du pluriel prises en charge par l'API `Intl.PluralRules` de JavaScript sont : `zero`, `one`, `two`, `few`, `many` et `other`. Si l'anglais n'utilise que `one` (« singulier ») et `other` (« pluriel »), des langues comme l'arabe ou le polonais en comptent davantage. Par exemple, un utilisateur anglophone pourrait s'attendre à : ```text "No one is watching" "1 person is watching" "2 people are watching" ``` Un utilisateur arabophone, en revanche, s'attendra à des formulations différentes pour le singulier, le duel (lorsqu'il y a exactement deux éléments), ainsi que pour les formes du pluriel désignant de petites et de grandes quantités : ```text "لا أحد يشاهد" "1 شخص يشاهد" "2 شخصان يشاهدان" "3 أشخاص يشاهدون" "11 شخصاً يشاهدون" ``` C’est là qu’une bibliothèque d’internationalisation devient indispensable. Chaque langue a sa propre logique pour déterminer quand et comment afficher les formes plurielles : mieux vaut donc s'appuyer sur une bibliothèque dédiée pour ne pas se tromper. Une bonne bibliothèque d’i18n remplit deux rôles : 1. Déterminer quelle forme du pluriel (`one`, `many`, `other`, etc.) utiliser en fonction du paramètre régional 2. 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 en savoir plus sur le formatage des pluriels.** Presque toutes les bibliothèques consacrent une partie de leur documentation à l’affichage des formes plurielles. ### Exemple complet : formes plurielles dans une application React multilingue Si vous n'utilisez pas encore de bibliothèque d'internationalisation, essayez [`gt-react`](/docs/react/react-quickstart) ! Le composant [``](/docs/react/reference/components/plural) de gt-react : * Offre un moyen simple et déclaratif d'afficher correctement les formes plurielles dans React * Fonctionne nativement avec le composant de formatage [``](/docs/react/reference/components/num) * Fonctionne nativement avec le composant de traduction [``](/docs/react/reference/components/t), qui s'intègre à notre [service de traduction](https://generaltranslation.com) pour générer automatiquement les formes du pluriel En assemblant toutes ces briques, on obtient un composant multilingue complet : ```jsx import { T, Plural, Num } from 'gt-react' // Fonctionne directement dans plus de 100 langues function Example({ count }) { return ( {count} person is watching } > {count} people are watching ) } ``` *** Configurez la pluralisation avec le [Démarrage rapide `gt-react`](/docs/react/react-quickstart) pour les applications React ou le [Démarrage rapide `gt-next`](/docs/react/nextjs-quickstart) pour les applications Next.js. Consultez la [Référence de l’API ``](/docs/react/reference/components/plural) pour l’API complète du composant. La pluralisation est l’un des défis i18n les plus courants dans React : bien la gérer dès le départ vous épargnera d’importants remaniements par la suite. ## Related questions - [Comment traduire du texte conditionnel en JSX ?](https://generaltranslation.com/fr/kb/translate-conditional-jsx.mdx): Plutôt que de traduire séparément chaque branche d’un ternaire, encapsulez la phrase entière dans un composant `` et exprimez la condition avec `` : le traducteur dispose ainsi du contexte complet et peut réorganiser la phrase selon chaque langue. - [Peut-on faire de l’i18n sans fichiers de traduction ?](https://generaltranslation.com/fr/kb/i18n-without-translation-files.mdx): Oui. Avec gt-react ou gt-next, le contenu reste intégré dans vos composants, à l’intérieur d’un composant ``, et les traductions sont générées lors du build. Il n’y a donc ni clés ni fichiers JSON par paramètre régional à écrire et à garder synchronisés. - [Quelle est la meilleure bibliothèque d’i18n pour une application React ?](https://generaltranslation.com/fr/kb/best-react-i18n-library.mdx): Les quatre principales bibliothèques d’i18n pour React sont gt-react de General Translation, react-i18next, Lingui et React Intl. Toutes les quatre affichent et formatent les traductions, mais seule gt-react les génère aussi, à partir du texte intégré directement dans votre JSX. Choisissez react-i18next pour conserver vos catalogues et plugins i18next, Lingui pour l’extraction vers des catalogues compilés, et React Intl pour FormatJS et ICU MessageFormat. ## Previous and next questions - Next question: [Comment traduire du texte conditionnel en JSX ?](https://generaltranslation.com/fr/kb/translate-conditional-jsx.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/fr/kb/sitemap.md) for every article.