JavaScript Tip: creare un elenco leggibile con Intl.ListFormat
Nell’ambito della programmazione in Javascript spesso si ha la necessità di mostrare all’utente il contenuto di un Array in modo che sia leggibile ma anche inseribile, ad esempio, all’interno di un testo.
Per quanto questo possa sembrare un task banale, se non si conosce a fondo la collezione di oggetti built-in messi a disposizione dalla libreria standard di JavaScript potremmo trovarci a scrivere complicate funzioni di concatenazione e formattazione.
Per fortuna una soluzione pronta all’uso esiste: Intl.ListFormat.
Intl.ListFormat – Un esempio d’uso con il nostro pay off
Supponiamo di dover mostrare a schermo l’Array ["Learn", "Code", "Deploy value"] e di volerlo inserire nella frase
Il pay off di Intré è costituito dalle espressioni Learn, Code e Deploy Value
Il primo tentativo che potremmo fare potrebbe essere:
> ["Learn", "Code", "Deploy value"].toString() < "Learn,Code,Deploy value"
Oppure:
> ["Learn", "Code", "Deploy value"].toLocaleString() < "Learn,Code,Deploy value"
Senza però ottenere ciò che desideriamo.
Potremmo allora provare ad utilizzare il metodo join di Array.prototype:
> ["Learn", "Code", "Deploy value"].join(', ')
< "Learn, Code, Deploy value"
Abbiamo migliorato, ma ancora non ci siamo.
A questo punto potremmo essere tentati di scrivere una funzione ad-hoc che, preso in input il nostro Array, lo formatti come ci aspettiamo.
Int.ListFormat è la soluzione
L’oggetto Intl.ListFormat [1], oltre a permettere la formattazione di un Array in modo leggibile, supporta anche l’internazionalizzazione.
Per utilizzarlo bisogna fornire in input due argomenti:
locale: per specificare la lingua;options(styleetype): parametri che permettono di specificare le modalità di formattazione da utilizzare.
Come output riceveremo un oggetto formatter con il quale ottenere la stringa desiderata.
Il seguente codice mostra quanto appena spiegato, sempre utilizzando l’array con le parole del nostro pay off:
> const list = ["Learn", "Code", "Deploy value"]
> const formatter = new Intl.ListFormat('it', {
style: 'long',
type: 'conjunction',
})
> formatter.format(list)
< "Learn, Code e Deploy value"
Ecco qualche esempio che mostra cosa possiamo ottenere giocando con gli argomenti:
// scegliamo il locale
> new Intl.ListFormat('en-GB', {style: 'long', type: 'conjunction'}).format(list)
< "Learn, Code and Deploy value"
> new Intl.ListFormat('es', {style: 'long', type: 'conjunction'}).format(list)
< "Learn, Code y Deploy value"
// scegliamo le opzioni di formattazione
// disgiunzione
> new Intl.ListFormat('it', {style: 'long', type: 'disjunction'}).format(list)
< "Learn, Code o Deploy value"
// alcuni locale prevedono ulteriori risultati di formattazione
> new Intl.ListFormat('en-US', {style: 'short', type: 'conjunction'}).format(list)
< "Learn, Code, & Deploy value"
Per altri esempi di uso di Intl.ListFormat consiglio di dare un’occhiata al blog post [2] di Kent C. Dodds mentre per la compatibilità con i browser si può fare riferimento a caniuse.com [3].
Conclusioni
Spesso i framework che utilizziamo forniscono già soluzioni a casi d’uso comuni che a volte però non vengono sfruttate abbastanza dagli sviluppatori i quali in certi casi ne ignorano l’esistenza.
Per evitare di “reinventare la ruota” ogni volta con complicate funzioni ad-hoc vale sempre la pena dare un occhio alle funzioni built-in e tenersi aggiornati [4] per non perdersi quelle che vengono via via introdotte.