Che cos'è la pluralizzazione?

Mi imbatto 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 nelle interfacce multilingue.

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 la parola modificata, 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.

Pluralizzazione in inglese

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

Per la pluralizzazione semplice 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 nostra logica sui plurali e funziona anche per i plurali irregolari:

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

Ma cosa succede se hai bisogno di una logica più complessa, ad esempio:

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

A questo punto dovresti iniziare a pensare seriamente a una libreria di internazionalizzazione ("i18n") a bassa manutenzione.

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 delle variabili anche in applicazioni monolingue.

Esistono molte librerie i18n per React, inclusa la nostra, gt-react (oppure gt-next se utilizzi Next.js). Mostrare un plurale in inglese usando gt-react è semplicissimo:

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 usa l'oggetto Intl di JavaScript 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> esegue il fallback ai suoi elementi figli se il numero passato a n non corrisponde a nessuna delle prop fornite.

Usare una libreria in questo caso è una best practice anche per le applicazioni solo in inglese e rende molto più semplice la futura internazionalizzazione.

Internazionalizzazione (i18n) e plurali

Realizzare un'interfaccia multilingue rende la gestione dei plurali molto più complessa.

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

Formattare i numeri per lingue diverse

Puoi anche usare l'oggetto Intl per formattare i numeri. 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>
}

Visualizzare forme plurali alternative

Le sei forme plurali supportate dall'oggetto Intl 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:

"Nessuno sta guardando"
"1 persona sta guardando"
"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”:

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

È 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 di internationalization 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.

Mettere insieme tutti i blocchi fondamentali

Se non stai ancora usando una libreria di internazionalizzazione, valuta gt-react!

Il componente <Plural> di gt-react:

• È un modo semplice e pratico per gestire correttamente i plurali
• 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, otteniamo un’interfaccia multilingue completa:

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

Vuoi saperne di più? Dai un'occhiata alla nostra documentazione su come configurare gt-react o gt-next.