Perché la pluralizzazione è importante in React

Ci capita spesso di imbatterci in app che mostrano messaggi innaturali come:

Hai 1 nuovo/i messaggio/i

Questo è un segnale tipico di uno sviluppatore che non ha riflettuto a fondo sull'esperienza utente.

Le app React devono spesso gestire la pluralizzazione — per il numero di notifiche, la lunghezza degli elenchi o i risultati di ricerca. E gestire correttamente la pluralizzazione non è poi così difficile, soprattutto se la tua app deve essere solo in inglese. Ma ci sono molte cattive pratiche in cui i nuovi sviluppatori tendono a cadere, soprattutto quando creano interfacce multilingue.

Questa guida spiega come gestire in modo pulito i plurali in inglese, formattare i numeri per diverse impostazioni regionali e creare un sistema di pluralizzazione pienamente multilingue in React e Next.js.

Il problema dei plurali hard-coded

Molti progetti — inclusi alcuni sorprendentemente grandi e importanti — gestiscono i plurali con logica hard-coded.

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

Ma la pluralizzazione è spesso più complessa che aggiungere semplicemente una "s" alla fine di una parola. Alcuni sostantivi hanno forme plurali irregolari, come "child" e "children". A volte anche altre parti della frase devono cambiare per concordare con il sostantivo, come "is" e "are" a seconda del numero.

La tabella seguente illustra alcuni casi comuni:

Usare espressioni condizionali diventa rapidamente macchinoso.

E diventa un incubo quando devi distribuire la tua app in altre lingue. Quello che funziona in inglese spesso non funziona affatto in lingue come il polacco o l'arabo, che hanno regole completamente diverse per gestire le quantità. Le aziende con cui lavoriamo spesso rimandano l'internazionalizzazione perché rifattorizzare interfacce utente hardcoded come questa è complicato.

Come gestire i plurali in inglese

In inglese, usare correttamente i plurali nella tua app è in genere semplice.

Per la semplice pluralizzazione dei sostantivi, scrivi una funzione di utilità:

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

Ora c'è un'unica funzione per gestire tutta la logica dei plurali, e funziona anche con i plurali irregolari:

pluralize(2, 'user') // "users"
pluralize(2, 'person', 'people') // "people"
pluralize(2, 'child', 'children') // "children"

Ma cosa succede se ti serve una logica più complessa, ad esempio:

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

A questo punto, dovresti valutare seriamente l'adozione di una libreria di internazionalizzazione ("i18n") che richieda poca manutenzione.

Anche se gli sviluppatori spesso pensano che le librerie i18n servano solo per le interfacce multilingue, possono essere molto utili per la gestione del plurale e la formattazione delle variabili anche nelle applicazioni monolingue. Dietro le quinte, la maggior parte delle librerie i18n usa l'API Intl.PluralRules integrata in JavaScript per determinare la forma plurale corretta in qualsiasi lingua.

Esistono molte librerie React per l'i18n, inclusa la nostra, gt-react (oppure gt-next se usi Next.js). Visualizzare un plurale in inglese con gt-react è semplice:

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'interfaccia utente viene renderizzata in modo condizionale in base al valore di n.

La maggior parte delle librerie usa l'API Intl.PluralRules di JavaScript per decidere quale forma plurale visualizzare. Questo significa che in inglese useresti il nome "one" per indicare il singolare e "other" per indicare il plurale. Il nostro componente <Plural> usa i contenuti figli come fallback se il numero fornito a n non corrisponde a nessuna delle props specificate.

Usare una libreria in questo caso è una buona pratica anche per le applicazioni solo in inglese e rende molto più semplice l'internazionalizzazione futura.

Pluralizzazione nelle app React multilingue (i18n)

Se la tua app si rivolge solo a utenti anglofoni, l'approccio descritto sopra potrebbe essere sufficiente — ma la maggior parte delle app in produzione, prima o poi, deve supportare più lingue. È qui che le cose si complicano.

• In arabo, i sostantivi hanno forme diverse a seconda che ce ne siano zero, uno, due o molti
• In spagnolo, tedesco e italiano, i numeri grandi usano i punti invece delle virgole, quindi 1,000,000 diventa 1.000.000
• In hindi, le cifre sono raggruppate a coppie, quindi 1,000,000 diventa 10,00,000

Per un'app internazionalizzata, dovresti usare una libreria i18n dedicata, che avrà una propria documentazione su come gestire i plurali e la formattazione dei numeri.

Formattare i numeri per diverse impostazioni regionali

Puoi usare l'oggetto Intl per formattare i numeri per qualsiasi impostazione regionale. Il modo più semplice per farlo è usare il metodo integrato toLocaleString().

Per impostazione predefinita, verrà usata l'impostazione regionale corrente del runtime:

const n = 1000000
n.toLocaleString() // mostra 1,000,000 quando l'impostazione regionale del runtime è "en-US" (inglese americano)
n.toLocaleString('de') // 1.000.000 perché l'impostazione regionale è stata specificata come "de" (tedesco)

gt-react offre anche un componente <Num> che utilizza internamente Intl.NumberFormat dietro le quinte.

import { Num } from 'gt-react'

// visualizza 1,000,000 quando la lingua è "en-US"
// visualizza 1.000.000 quando la lingua è "de"
// visualizza 10,00,000 quando la lingua è "hi"
export default function Example() {
  return <Num>1000000</Num>
}

Comprendere le forme del plurale nelle diverse lingue

Le sei forme plurali supportate dall'API Intl.PluralRules di JavaScript sono: zero, one, two, few, many, other. Sebbene l'inglese usi solo one ("singolare") e other ("plurale"), lingue come l'arabo e il polacco ne hanno più di due.

Per esempio, un utente anglofono potrebbe aspettarsi:

"Nessuno sta guardando"
"1 persona sta guardando"
"2 persone stanno guardando"

Mentre un utente arabofono potrebbe aspettarsi espressioni diverse per il singolare, duale (quando il conteggio è esattamente pari a due elementi) e per le forme plurali piccole e grandi:

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

È qui che una libreria di internazionalizzazione diventa indispensabile. Ogni lingua ha una propria logica per determinare quando e come visualizzare i plurali, quindi è meglio affidarsi a una libreria dedicata per gestirli correttamente.

Una buona libreria i18n farà due cose:

1. Determinare quale forma plurale (one, many, other, ecc.) usare in base all’impostazione regionale
2. Recuperare la traduzione nella lingua corretta corrispondente a quella forma

Se hai già una libreria di internazionalizzazione, consulta la documentazione per informazioni sulla formattazione dei plurali. Quasi tutte le librerie hanno una documentazione specifica sul rendering dei plurali.

Esempio completo: plurali in un'app React multilingue

Se non usi già una libreria di internazionalizzazione, prendi in considerazione gt-react!

Il componente <Plural> di gt-react:

• È un modo semplice e dichiarativo per gestire correttamente i plurali in React
• Funziona nativamente con il componente di formattazione <Num>
• Funziona nativamente con il componente di traduzione <T>, che si integra con il nostro servizio di traduzione gratuito per generare automaticamente le forme plurali

Mettendo insieme tutti questi elementi, ecco un componente multilingue completo:

import { T, Plural, Num } from 'gt-react'

// Works out of the box in 100+ languages
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>
  )
}

Prossimi passi

Pronto a gestire correttamente i plurali nella tua app React? Dai un'occhiata alle nostre guide quickstart:

• quickstart di gt-react per le app React
• quickstart di gt-next per le app Next.js
• riferimento API di <Plural> per l'API completa del componente

La pluralizzazione è una delle sfide di i18n più comuni in React: farla bene fin dall'inizio ti evita interventi di refactoring significativi in seguito.