Qu'est-ce que la pluralisation ?

Je rencontre 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 gestion du 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 pour les interfaces multilingues.

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 mot modifié, comme "is" et "are" qui changent en fonction du nombre.

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

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.

Pluralisation en anglais

En anglais, gérer correctement les pluriels dans votre application est généralement simple.

Pour la pluralisation simple des noms, écrivez une fonction utilitaire :

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

Nous avons maintenant une fonction unique pour gérer toute notre logique de pluriels, et elle fonctionne aussi pour les pluriels irréguliers :

pluralize(2, 'utilisateur') // "utilisateurs"
pluralize(2, 'personne', 'personnes') // "personnes"
pluralize(2, 'enfant', 'enfants') // "enfants"

Mais que faire si vous avez besoin d’une logique plus complexe, par exemple :

"Personne ne regarde"
"1 personne regarde"
"2 personnes regardent"

À ce stade, vous devriez sérieusement envisager une bibliothèque d’internationalisation (« i18n ») à faible maintenance.

Bien que 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.

Il existe de nombreuses bibliothèques i18n pour React, y compris la nôtre, gt-react (ou gt-next si vous utilisez Next.js). Afficher un pluriel en anglais avec gt-react est très 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’objet Intl de JavaScript pour déterminer quelle forme de pluriel afficher. Cela signifie qu’en anglais, vous utiliseriez le nom "one" pour désigner le singulier et "other" pour désigner le pluriel. Notre composant <Plural> revient à ses enfants si le nombre passé à n ne correspond à aucune des props fournies.

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

Internationalisation (i18n) et pluriels

Proposer une interface multilingue rend la gestion des pluriels bien plus complexe.

• 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 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 langues

Vous pouvez également utiliser l’objet Intl pour formater des nombres. 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>
}

Affichage des formes plurielles alternatives

Les six formes plurielles prises en charge par l’objet Intl 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 à :

"Personne ne regarde"
"1 personne regarde"
"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 :

« Personne ne regarde »
« 1 personne regarde »
« 2 personnes regardent »
« 3 personnes regardent »
« 11 personnes regardent »

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 d'internationalisation fera deux choses :

1. Déterminer quelle forme de pluriel (one, many, other, etc.) utiliser en fonction de la locale
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 obtenir des informations sur le formatage des pluriels. Presque toutes les bibliothèques disposent d'une documentation dédiée au rendu des pluriels.

Assembler tous les éléments

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 fonctionnelle d'afficher correctement les pluriels
• 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, nous obtenons une interface multilingue complète :

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>
  )
}

Vous souhaitez en savoir plus ? Consultez notre documentation pour configurer gt-react ou gt-next.