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
(style
etype
): 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].