Pourquoi la pluralisation est importante dans React

On voit souvent des applications afficher des messages maladroits, par exemple :

You have 1 new message(s)

C’est un 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 — pour le nombre de notifications, la taille des listes ou les résultats de recherche. Et bien gérer la pluralisation n’est pas si compliqué, surtout si votre application n’existe qu’en anglais. Mais les nouveaux développeurs tombent souvent dans de nombreux pièges, surtout lorsqu’ils créent des interfaces multilingues.

Ce guide explique comment gérer proprement les pluriels en anglais, formater les nombres pour différents paramètres régionaux et mettre en place un système de pluriels entièrement multilingue dans React et Next.js.

Le problème des pluriels codés en dur

De nombreux projets — y compris des projets étonnamment importants et d’envergure — codent en dur la gestion du pluriel.

export default function Example({ n }) {
  return (
    <p>
      Displaying {n} item{n === 1 ? '' : 's'}
    </p>
  )
}

Mais le pluriel 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 éléments de la phrase doivent aussi changer pour s’accorder avec le nom, comme "is" et "are" selon le nombre.

Le tableau ci-dessous illustre quelques scénarios courants :

L’utilisation d’expressions conditionnelles devient vite difficile à maintenir.

Et cela devient un cauchemar quand vous devez proposer votre application dans d’autres langues. Ce qui fonctionne en anglais ne marche souvent plus du tout dans des langues comme le polonais ou l’arabe, qui ont des règles complètement différentes pour exprimer les quantités. Les entreprises avec lesquelles nous travaillons repoussent souvent l’internationalisation à cause de la difficulté à refactoriser une interface codée en dur comme celle-ci.

Gérer le pluriel en anglais

En anglais, utiliser correctement le pluriel dans votre application est généralement assez simple.

Pour les cas simples de pluralisation des noms, écrivez une fonction utilitaire :

export function pluralize(
  count: number,
  singular: string,
  plural: string = singular + 's'
) {
  return `${count === 1 ? singular : plural}`;
}

Il existe désormais une seule fonction pour gérer toute la logique des pluriels, et elle fonctionne aussi pour 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 people are watching"

À ce stade, vous devriez sérieusement envisager d’utiliser une bibliothèque d’internationalisation ("i18n") facile à maintenir.

Bien que les développeurs considèrent souvent que les bibliothèques d’i18n ne servent qu’aux interfaces multilingues, elles peuvent aussi être très utiles pour la gestion du pluriel et le formatage des variables, même dans des applications monolingues. En coulisses, la plupart des bibliothèques d’i18n s’appuient sur l’API intégrée Intl.PluralRules de JavaScript pour déterminer la forme plurielle correcte dans n’importe quelle langue.

Il existe de nombreuses bibliothèques i18n pour React, dont la nôtre, gt-react (ou gt-next si vous utilisez Next.js). Afficher un pluriel en anglais avec gt-react est simple :

import { Plural } from 'gt-react'

function Example({ count }) {
  return (
    <Plural n={count} zero={'No one is watching'} one={`${count} person is watching`}>
      {count} people are watching
    </Plural>
  )
}

L’interface utilisateur est affichée conditionnellement en fonction de la valeur de n.

La plupart des bibliothèques utilisent l’API Intl.PluralRules de JavaScript pour déterminer quelle forme du pluriel afficher. Cela signifie qu’en anglais, vous utiliserez le nom "one" pour le singulier et "other" pour le pluriel. Notre composant <Plural> se rabat sur ses enfants si le nombre fourni à n ne correspond à aucune des propriétés fournies.

Utiliser une bibliothèque ici est une bonne pratique, même pour les applications uniquement en anglais, et facilite grandement une internationalisation future.

La pluralisation dans les applications React multilingues (i18n)

Si votre application s’adresse uniquement à des utilisateurs anglophones, l’approche ci-dessus peut suffire — mais la plupart des applications en production finissent 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
• 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 d’i18n dédiée qui disposera de sa propre documentation expliquant comment gérer les pluriels et le formatage des nombres.

Formater des nombres pour différents paramètres régionaux

Vous pouvez utiliser l’objet Intl pour formater des nombres pour 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 :

const n = 1000000
n.toLocaleString() // affiche 1,000,000 lorsque le paramètre régional d'exécution est "en-US" (anglais américain)
n.toLocaleString('de') // 1.000.000 car le paramètre régional est spécifié comme "de" (allemand)

gt-react propose également un composant <Num> qui utilise 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 du pluriel selon les langues

Les six formes du pluriel prises en charge par l’API Intl.PluralRules de JavaScript sont les suivantes : 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 ont plus de deux.

Par exemple, un utilisateur anglophone pourrait s’attendre à :

"No one is watching"
"1 person is watching"
"2 people are watching"

Alors qu’un utilisateur arabophone peut s’attendre à des expressions différentes pour le singulier, le duel (lorsqu’il y a exactement deux éléments), ainsi que pour les formes du pluriel pour les petites et les grandes quantités :

"لا أحد يشاهد"
"1 شخص يشاهد"
"2 شخصان يشاهدان"
"3 أشخاص يشاهدون"
"11 شخصاً يشاهدون"

C’est là qu’une bibliothèque d’internationalisation devient indispensable. Chaque langue a sa propre logique pour savoir quand et comment utiliser le pluriel, il vaut donc mieux s’appuyer sur une bibliothèque dédiée pour le gérer correctement.

Une bonne bibliothèque d’i18n fera deux choses :

1. Déterminer quelle forme du pluriel (one, many, other, etc.) utiliser en fonction du paramètre régional
2. Trouver, dans la bonne langue, la traduction correspondant à cette forme

Si vous utilisez déjà une bibliothèque d’internationalisation, consultez sa documentation pour savoir comment gérer le pluriel. Presque toutes les bibliothèques proposent une documentation dédiée à la gestion des pluriels.

Exemple complet : le pluriel dans une application React multilingue

Si vous n’utilisez pas encore de bibliothèque d’internationalisation, pensez à gt-react !

Le composant <Plural> de gt-react :

• offre un moyen simple et déclaratif de gérer correctement le pluriel 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 du pluriel

En réunissant tous ces é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={'No one is watching'}
        one={
          <>
            <Num>{count}</Num> person is watching
          </>
        }
      >
        <Num>{count}</Num> people are watching
      </Plural>
    </T>
  )
}

Prochaines étapes

Prêt à gérer correctement les formes du pluriel dans votre application React ? Consultez nos guides de démarrage rapide :

• guide de démarrage rapide gt-react pour les applications React
• guide de démarrage rapide gt-next 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 gérer dès le départ vous évitera d’importantes refactorisations par la suite.