Perché la pluralizzazione è importante in React

Ci imbattiamo spesso in app che mostrano messaggi un po' innaturali come:

Hai 1 nuovo messaggio

Questo è un chiaro segnale di uno sviluppatore che non ha riflettuto con attenzione sulla user experience.

Le app React hanno spesso bisogno della gestione del plurale — per i conteggi delle notifiche, la lunghezza delle liste o i risultati di ricerca. E non è così difficile gestire correttamente il plurale, soprattutto se ti serve l’app solo in inglese. Ma ci sono molte cattive pratiche in cui gli sviluppatori alle prime armi tendono a cadere, soprattutto quando costruiscono interfacce multilingue.

Questa guida spiega come gestire correttamente i plurali in inglese, formattare i numeri per diverse impostazioni locali (locale) e creare un sistema di plurali completamente multilingue in React e Next.js.

Il problema dei plurali hard-coded

Molti progetti — inclusi alcuni sorprendentemente grandi e importanti — incorporano la logica dei plurali direttamente nel codice.

export default function Example({ n }) {
  return (
    <p>
      {n === 1 ? 'Visualizzazione di' : 'Visualizzazione di'} {n} element{n === 1 ? 'o' : 'i'}
    </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 riflettere il sostantivo, ad esempio "is" e "are" che cambiano a seconda del conteggio.

La tabella seguente illustra alcuni scenari comuni:

L'uso di espressioni condizionali diventa rapidamente ingestibile.

E diventa un incubo quando devi distribuire la tua app in altre lingue. Quello che funziona per l'inglese spesso si rompe completamente in lingue come il polacco o l'arabo, che hanno regole del tutto diverse per gestire le quantità. Le aziende con cui lavoriamo spesso rimandano l'internazionalizzazione a causa della complessità di effettuare il refactoring di UI hardcoded come questa.

Come gestire i plurali in inglese

In inglese, usare i plurali corretti nella tua app di solito è semplice.

Per una 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 esiste un'unica funzione per gestire tutta la logica dei plurali, e funziona anche per i plurali irregolari:

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

E se ti serve una logica più complessa, ad esempio:

"No one is watching"
"1 person is watching"
"2 persone stanno guardando"

A questo punto, è il momento di valutare seriamente l'adozione di una libreria di internazionalizzazione ("i18n") a manutenzione ridotta.

Anche se gli sviluppatori spesso pensano che le librerie i18n servano solo per interfacce multilingue, possono essere molto utili per la gestione dei plurali e la formattazione delle variabili anche in 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 per qualsiasi lingua.

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

import { Plural } from 'gt-react'

function Example({ count }) {
  return (
    <Plural n={count} zero={'Nessuno sta guardando'} one={`${count} persona sta guardando`}>
      {count} persone stanno guardando
    </Plural>
  )
}

L'interfaccia utente viene renderizzata in modo condizionale in base al valore di n.

La maggior parte delle librerie utilizza l'API JavaScript Intl.PluralRules per decidere quale forma plurale mostrare. Questo significa che in inglese useresti il nome "one" per riferirti al singolare e "other" per riferirti al plurale. Il nostro componente <Plural> usa direttamente i propri elementi figli se il numero passato a n non corrisponde ad alcuna delle prop fornite.

Utilizzare una libreria qui è una best practice anche per applicazioni monolingue in inglese e rende la futura internazionalizzazione molto più semplice.

Pluralizzazione nelle app React multilingue (i18n)

Se la tua app serve solo utenti anglofoni, l'approccio sopra potrebbe essere tutto ciò di cui hai bisogno — ma la maggior parte delle app in produzione prima o poi deve supportare più lingue. Ed è lì che le cose si fanno interessanti.

• 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 è consigliabile usare una libreria i18n dedicata, che avrà una propria documentazione su come gestire i plurali e la formattazione dei numeri.

Formattare i numeri per locali diversi

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

Per impostazione predefinita verrà utilizzata l'impostazione locale corrente del runtime:

const n = 1000000
n.toLocaleString() // visualizza 1.000.000 quando il locale di runtime è "en-US" (inglese americano)
n.toLocaleString('de') // 1.000.000 perché il locale è stato specificato come "de" (tedesco)

gt-react offre anche un componente <Num> che si basa su 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 plurali nelle diverse lingue

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

Ad esempio, un utente anglofono potrebbe aspettarsi:

"No one is watching"
"1 person is watching"
"2 persone stanno guardando"

Mentre un utente di lingua araba potrebbe aspettarsi espressioni diverse per il singolare, il duale (quando il conteggio è esattamente di due elementi) e per i plurali “piccolo” e “grande”:

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

È qui che una libreria di internationalization diventa essenziale. Ogni lingua ha una propria logica per stabilire quando e come visualizzare i plurali, quindi è meglio affidarsi a una libreria dedicata per gestirli nel modo corretto.

Una buona libreria i18n farà due cose:

1. Decidere quale forma plurale (one, many, other, ecc.) usare in base alla lingua/locale
2. Individuare la traduzione nella lingua corretta che corrisponde a quella forma

Se usi già una libreria di internationalization, consulta la documentazione per informazioni sulla formattazione dei plurali. Quasi tutte le librerie hanno una documentazione dedicata al rendering dei plurali.

Esempio completo: plurali in un'app React multilingue

Se non stai ancora usando una libreria di internazionalizzazione, valuta 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 i blocchi fondamentali, ecco un componente multilingue completo:

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

// Funziona subito in oltre 100 lingue
function Example({ count }) {
  return (
    <T>
      <Plural
        n={count}
        zero={'Nessuno sta guardando'}
        one={
          <>
            <Num>{count}</Num> persona sta guardando
          </>
        }
      >
        <Num>{count}</Num> persone stanno guardando
      </Plural>
    </T>
  )
}

Prossimi passi

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

• gt-react quickstart per app React
• gt-next quickstart per app Next.js
• <Plural> API reference per la documentazione completa dell'API del componente

La pluralizzazione è una delle sfide i18n più comuni in React — gestirla correttamente fin dall'inizio evita pesanti interventi di refactoring in seguito.