Raggiungi un pubblico più ampio adattando i tuoi contenuti a qualsiasi lingua o locale con l'API Intl.

L'API Intl semplifica la formattazione e la manipolazione di testo, numeri, date e valute internazionalizzati. Ti consente di gestire vari formati di dati in base alle impostazioni locali.

Questa API risolve la sfida della formattazione dei dati per culture e lingue diverse. Semplifica la formattazione dei numeri con il simbolo di valuta o le date appropriati utilizzando il formato di data appropriato per una regione specifica.

Utilizzando l'API Intl, puoi creare applicazioni Web accessibili e facili da usare per il pubblico di tutte le regioni e culture.

Ottenere la lingua di un utente

IL Costruttori JavaScript forniti dall'API Intl identificano le impostazioni locali che useranno per formattare la data, il testo, il numero, ecc., seguendo uno schema familiare. Ogni costruttore prende a locale e un opzioni oggetto come argomento. Utilizzando questi argomenti, il costruttore confronta le impostazioni locali richieste con le impostazioni locali attualmente supportate.

instagram viewer

Per ottenere le impostazioni locali di un utente, puoi utilizzare il file navigator.language proprietà. Questa proprietà restituisce una stringa che rappresenta la versione della lingua del browser.

Il valore del navigator.language property è un tag di lingua BCP 47, che consiste in un codice di lingua e, facoltativamente, un codice di regione e altri sottotag. Ad esempio, "en-US" rappresenta l'inglese parlato negli Stati Uniti.

Puoi anche usare il navigator.linguaggi property per ottenere un array delle lingue preferite dall'utente, ordinate per priorità. Il primo elemento nell'array rappresenta la preferenza della lingua principale dell'utente.

Una volta ottenute le impostazioni locali dell'utente, è possibile personalizzare la visualizzazione di date, orari, numeri e valute dell'applicazione utilizzando il internazionale API.

Puoi creare un semplice Funzione javascript per aiutarti a ottenere le impostazioni locali di un utente. Ecco uno snippet di codice che può aiutare:

cost getUserLocale = () => {
Se (navigator.lingue && navigator.lingue.lunghezza) {
ritorno navigator.lingue[0];
 }
ritorno navigator.lingua;
};
consolare.log (getUserLocale());

Questo getUserLocale La funzione restituisce il primo elemento della proprietà navigator.languages, se disponibile. In caso contrario, ricorre alla proprietà navigator.language, che rappresenta la lingua preferita dell'utente nei browser meno recenti.

Formattazione delle date per località diverse

Per formattare le date utilizzando il internazionale API, puoi usare il internazionale DataOraFormato() costruttore. Questo costruttore accetta due argomenti: una stringa locale e un oggetto opzioni.

L'oggetto opzioni può contenere proprietà che controllano la formattazione della data.

Alcune delle opzioni comunemente utilizzate includono:

  • giorno feriale: Questa opzione specifica il formato del giorno della settimana. Puoi impostarlo su entrambi lungo (Venerdì), corto (Ven), o stretto (F).
  • anno: Questa opzione specifica il formato dell'anno. Puoi impostarlo su entrambi numerico (2023) o 2 cifre (23).
  • mese: Questa opzione specifica il formato del mese. Puoi impostarlo su entrambi numerico (3), 2 cifre (03), lungo (Marzo), corto (marzo), o stretto (M).
  • giorno: Questa opzione specifica il formato del giorno. Puoi impostarlo su entrambi numerico (2) o 2 cifre (02).

Ecco un esempio che mostra come formattare una data utilizzando il formato internazionale DataOraFormato() costruttore:

cost data = Data.Ora()
cost locale = getUserLocale();
cost opzioni = {
 giorno della settimana: "lungo",
 anno: "numerico",
 mese: "lungo",
 giorno: "numerico",
};


cost formattatore = nuovointernazionale.DateTimeFormat (locale, opzioni);
// giorno della settimana, data del mese, anno (venerdì 24 marzo 2023)
consolare.log (formatter.format (data));

Questo codice imposta un oggetto formattatore passando la locale dell'utente a internazionale DataOraFormato(), insieme a una serie di opzioni. Quindi utilizza il formattatore per trasformare la data corrente in una stringa. IL opzioni L'oggetto contiene proprietà che controllano la formattazione della data.

Formattazione di diversi tipi di numeri

Puoi usare il internazionale API per formattare i numeri utilizzando l' internazionale NumeroFormato() costruttore. Come internazionale DataOraFormato(), questo costruttore accetta una stringa locale e un oggetto options come argomenti.

L'oggetto opzioni contiene proprietà che controllano la formattazione del numero. Queste proprietà variano a seconda di quanto specificato stile del numero.

Formattazione di decimali e percentuali

È possibile formattare i numeri come decimali e percentuali utilizzando internazionale NumeroFormato() costruttore impostando la proprietà style su decimale per i decimali e per cento per le percentuali.

Ecco un esempio che mostra come formattare un decimale:

cost numero = 123456;
cost locale = getUserLocale(); // en-US
cost opzioni = {
 stile: "decimale",
 minimoFractionDigits: 2,
 massimoFractionDigits: 2,
 useGrouping: VERO,
};


cost formattatore = nuovointernazionale.NumberFormat (locale, opzioni);
consolare.log (formatter.format (num)); // 123,456.00

Il blocco di codice precedente formatta 123.456 come decimale con separatori di raggruppamento (,) e due cifre decimali.

Ecco un esempio che mostra come formattare una percentuale:

cost numero = 123456;
cost locale = getUserLocale();
cost opzioni = {
 stile: "per cento",
 useGrouping: VERO,
};


cost formattatore = nuovointernazionale.NumberFormat (locale, opzioni);
consolare.log (formatter.format (num)); // 12,345,600%

Il blocco di codice sopra esprime 123.456 in percentuale con separatori di raggruppamento.

Formattazione delle valute

È possibile formattare i numeri come valute impostando la proprietà style su valuta. Dovresti impostare altre opzioni accanto ad esso, come ad esempio:

  • valuta: una stringa che rappresenta il codice valuta ISO 4217 (come "USD", "EUR" o "JPY") da utilizzare per la formattazione. Se non fornisci questa opzione, il formattatore sceglierà un codice valuta in base alle impostazioni locali dell'utente.
  • valutaDisplay: Questa proprietà specifica come il browser deve visualizzare la valuta. Può essere simbolo (US $ 75), codice (USD 75), o nome (75 dollari USA).

Ecco un esempio che mostra come puoi formattare la valuta:

cost numero = 123456;
cost locale = getUserLocale(); // en-US
cost opzioni = {
 stile: "valuta",
 valuta: "DOLLARO STATUNITENSE",
 valutaDisplay: "codice",
};


cost formattatore = nuovointernazionale.NumberFormat (locale, opzioni);
consolare.log (formatter.format (num)); // USD 123.456,00

Il blocco di codice sopra formatta 123.456 come valuta (USD).

Unità di formattazione

Puoi usare il internazionale NumeroFormato() costruttore per formattare i numeri con unità, come lunghezza, volume e massa. Puoi farlo impostando il stile A unità. Quando imposti lo stile su unità, devi specificare queste opzioni:

  • unità: questa proprietà specifica l'unità da utilizzare per la formattazione, ad esempio "metro", "chilogrammo", "litro", "secondo" e così via.
  • unitDisplay: Questa proprietà specifica come il browser deve visualizzare l'unità. Puoi impostarlo su entrambi lungo (10 litri), corto (10 L), o stretto (10 litri).

Ecco un esempio che mostra come puoi formattare le unità:

cost numero = 123456;
cost locale = getUserLocale();
cost opzioni = {
 stile: "unità",
 unità: "litro",
 unitàDisplay: "lungo",
};


cost formattatore = nuovointernazionale.NumberFormat (locale, opzioni);
consolare.log (formatter.format (num)); //123.456 litri

Il blocco di codice sopra formatta il numero 123.456 come unità in litri.

Alternative all'API Intl

L'API Intl fornisce un set potente e flessibile di strumenti per la formattazione di date, numeri, valute e unità nelle applicazioni JavaScript. Supporta molte impostazioni locali e fornisce un modo coerente per formattare i dati in diverse culture e lingue.

Potresti voler utilizzare una libreria alternativa, come Luxon o Day.js, a causa del supporto limitato del browser per Intl. In definitiva, decidere tra l'API Intl o un'alternativa dipende dai requisiti e dai vincoli specifici del progetto.