Come iniziare con l'internazionalizzazione in JavaScript

Adattando le nostre app per lingue e paesi diversi, forniamo una migliore esperienza utente. È più semplice per gli utenti gestire le notazioni note per date, valute e numeri.

L'internazionalizzazione (i18n) implica l'aggiunta del supporto per diverse lingue e paesi nella tua app.Il numero 18 rappresenta il numero di lettere tra la prima "i" e l'ultima "n" .

Esempi di internazionalizzazione potrebbero essere il supporto Unicode, la personalizzazione dell'interfaccia utente per diversi alfabeti o l'ordinamento di array di stringhe non inglesi.

JavaScript implementa la specifica API Internationalization e definisce l'oggetto Intl incorporato.

E ciò che lo rende così utile è che ha una grande compatibilità cross-browser e il supporto di Node.js:

Iniziamo!

L' Intloggetto fornisce l'accesso a diversi costruttori, come:

  • Intl.DateTimeFormat : formattazione di data e ora sensibile alla lingua.
  • Intl.NumberFormat: formattazione del numero sensibile alla lingua.
  • Intl.PluralRules: formattazione sensibile plurale e regole linguistiche plurali.
  • Intl.Collator: confronto di stringhe sensibile alla lingua.

La creazione di uno qualsiasi di questi oggetti segue uno schema semplice:

const formatter = new Intl.ctor(locales, options);

Ad esempio, la lingua " de-AT" : la lingua tedesca utilizzata in Austria:

const dateFormatterAT = new Intl.DateTimeFormat("de-AT");

Quindi chiamiamo il metodo format () con un oggetto Date fornito :

const date = new Date("2018-11-25");const format = dateFormatterAT.format(date); // "25.11.2018"

Contiene solo codici di lingua e paese. Presto vedremo esempi più completi. Qui puoi trovare altri esempi di impostazioni locali.

Possiamo usare navigator.language, la lingua preferita dall'utente, che usiamo come locale:

Qui invece di chiamare direttamente un metodo di formattazione , possiamo assegnarlo come funzione. È fantastico perché una volta creata una funzione di formattazione specializzata, possiamo usarla più volte.

Solo poche righe di codice e hai una data localizzata!

Quindi, in seguito, approfondiremo e impareremo di più sulle località. Se non sei pronto e vuoi solo vedere demo interessanti come questa nell'immagine qui sotto, vai alla sezione degli esempi qui sotto!

Immergersi più in profondità

Bene, questo è sufficiente per avere un'idea di come funziona, ma i casi d'uso reali potrebbero diventare molto più complicati. E se volessimo:

  • visualizzare la nostra data utilizzando il calendario giapponese o persiano
  • utilizzare cifre tailandesi o arabo-indiane sia per le date che per i numeri
  • usa il cinese semplificato
  • Qualche combinazione di quanto sopra?

Cos'è Locale?

Per lavorare con questa API, dobbiamo saperne di più sulle impostazioni locali. Prima di tutto, diamo una definizione.

Una locale è un identificatore che fa riferimento a una serie di preferenze dell'utente come:

  • date e orari
  • numeri e valute
  • nomi tradotti per fusi orari, lingue e paesi
  • unità di misura
  • ordinamento (confronto)

Una locale non distingue tra maiuscole e minuscole. È solo una convenzione .

La locale deve essere una stringa contenente un tag della lingua BCP 47 e tutte le parti sono separate da trattini.

Diamo un'occhiata al prossimo esempio:

Ancora una volta, solo quattro righe di codice? Diamo un'occhiata al diagramma seguente ed esaminiamo ogni parte del nostro locale:

Da questa immagine, puoi vedere che è richiesta solo la prima parte, il codice della lingua. È improbabile che tu abbia bisogno di un locale come questo. Ma questo è un buon esempio di come dare un'occhiata a ogni possibile parte di locale e avere un'idea di cosa sia un locale.

Il nostro locale contiene tutte le parti possibili:

  • zh (codice lingua) - lingua cinese
  • Hans (codice dello script) - scritto in caratteri semplificati
  • CN (codice paese) - come utilizzato in Cina.
  • bauddha (variante) - utilizzando un dialetto sanscrito ibrido buddista
  • u-nu-hanidec (estensione) - utilizzando numeri decimali Han

Di seguito puoi trovare altri esempi di script, varianti ed estensioni.

Codici di script

Questi vengono utilizzati con i tag della lingua per indicare in quale script è scritta una lingua. Ad esempio:

Codici delle varianti

Le varianti rappresentano un dialetto linguistico.

Estensioni

Include diversi calendari e sistemi numerici.

I calendari hanno il prefisso "u-ca-", valori possibili (non tutti inclusi):

I sistemi numerici hanno prefisso "u-nu", valori possibili (non tutti inclusi):

L'organizzazione Iana è responsabile dell'aggiornamento di questo elenco.

Negoziazione locale

L'ultima cosa che dobbiamo imparare sulle impostazioni locali è come vengono risolte. Abbiamo visto questo esempio prima:

const formatter = new Intl.ctor(locales, options);

L' localesargomento specifica una singola lingua o un array di impostazioni locali. L'ambiente (browser o Node.js) lo confronta con i locali che ha a disposizione e sceglie quello migliore.

Esistono due algoritmi di corrispondenza:

  • lookup - controlla da più specifico a meno: se zh-Hans-SG non è disponibile, ottieni zh-Hans , altrimenti - zh, else - un locale predefinito.
  • best fit (default) - Algoritmo migliorato. Se "es-GT" - spagnolo per il Guatemala è richiesto, ma non trovato, allora invece di fornire un fallback come "es", verrà scelto "es-MX" - spagnolo in Messico.

Se forniamo un array di impostazioni locali, la prima corrispondenza vince.

Quindi, abbastanza teoria: ora è il momento di esercitarsi!

Esempi

Il codice per gli esempi può essere trovato su GitHub.

Formattazione data / ora

Le impostazioni locali non sono l'unica cosa fantastica dell'API Intl. È possibile modificare il risultato in modo desiderabile utilizzando un optionsargomento.

Questo è un enorme aggiornamento rispetto all'oggetto Date !

A differenza di moment.js, non puoi scambiare manualmente nessuna parte della data come anno e mese. Devi invece usare la lingua corretta. Può sembrare una limitazione , ma lo rende più familiare per i nostri utenti.

Formattazione dei numeri

Sapendo come affrontare le date, sai come affrontare i numeri. L'unica differenza è l'elenco delle opzioni:

Formattazione valuta

Per le valute utilizziamo il Intl.NumberFormatcostruttore, ma forniamo un diverso elenco di opzioni:

Nota, non convertiamo denaro qui. Tutto ciò che facciamo è formattare il numero 172630 utilizzando le regole valutarie appropriate . Qui puoi trovare l'elenco dei codici di valuta.

Formattazione delle regole plurali

Questo ti dice quale modulo si applica in base a un dato numero per una specifica località:

Può essere molto utile per la formattazione dei numeri ordinali:

Ordinamento delle stringhe

Ordinare le stringhe che contengono lettere extra come ä in tedesco o svedese non è quello che vuoi fare manualmente, solo perché l'ordine dipende dalla lingua. Fortunatamente per noi, abbiamo . E ancora una volta tutto ciò che dobbiamo fare è fornire una locale richiesta:Intl.Collator

Conclusione

L'internazionalizzazione è un argomento grande e complesso. Ma se sai cos'è un locale e come costruirlo, il resto è semplicissimo da usare.

Questo è tutto!

Se hai domande o commenti, fammelo sapere nei commenti in basso o inviami un ping su Twitter.

Se è stato utile, fai clic sul pulsante? pulsante in basso alcune volte per mostrare il tuo supporto! ⬇⬇ ??

Ecco altri articoli che ho scritto:

Come semplificare la tua base di codice con map (), reduce () e filter () in JavaScript

Quando leggi di Array.reduce e di quanto sia interessante, il primo e talvolta l'unico esempio che trovi è la somma di… medium.freecodecamp.org Installazione delle API REST Node.js pronta per la produzione utilizzando TypeScript, PostgreSQL e Redis.

Un mese fa mi è stato assegnato un compito per creare una semplice API di ricerca. Tutto quello che doveva fare era acquisire alcuni dati da terze parti ... medium.com

Grazie per aver letto ❤️