Un modo definitivo di formattare le date per i siti internazionali

I formati delle date variano in base alla regione e alla lingua, pertanto è sempre utile trovare un modo per visualizzare le date per gli utenti, in base alla loro lingua e regione.

Già nel dicembre 2012, ECMA ha rilasciato le specifiche dell'API di internazionalizzazione per JavaScript. L'API di internazionalizzazione ci aiuta a visualizzare determinati dati in base alla lingua e alle specifiche cuturali. Può essere usato per identificare valute, fusi orari e altro.

In questo post esamineremo la formattazione della data utilizzando questa API.

Conoscere le impostazioni locali dell'utente

Per mostrare la data secondo le impostazioni locali preferite dell'utente, prima dobbiamo sapere qual è il locale preferito. Attualmente il modo infallibile per sapere che è quello di chiedere all'utente; Consenti agli utenti di selezionare la lingua e le impostazioni regionali preferite nella pagina web.

Tuttavia, se questa non è un'opzione, è possibile interpretare l'intestazione della richiesta Accept-Language o leggere i valori di navigator.language (per Chrome e Firefox) o navigator.browserLanguage (per IE).

Si prega di sapere che non tutte queste opzioni restituiscono la lingua preferita dell'interfaccia utente del browser.

 var language_tag = window.navigator.browserLanguage || window.navigator.language || "En"; // restituisce tag della lingua come 'en-GB' 

Controlla l'API di internazionalizzazione

Per sapere se il browser supporta o meno l'API di internazionalizzazione, possiamo verificare la presenza dell'oggetto globale Intl .

 se (window.hasOwnProperty (("Intl") && typeof Intl === "object") {// API di internazionalizzazione è presente, usiamola} 

L'oggetto Intl

Intl è un oggetto globale per l'utilizzo dell'API di internazionalizzazione. Ha tre proprietà che sono costruttori per tre oggetti cioè Collator, NumberFormat e DateTimeFormat .

L'oggetto che useremo è DateTimeFormat che ci aiuterà a formattare l'ora della data in base alle diverse lingue.

L'oggetto DateTimeFormat

Il costruttore DateTimeFormat accetta due argomenti facoltativi;

• locales : una stringa o una serie di stringhe che rappresentano i tag della lingua, ad esempio; "De" per la lingua tedesca, "en-GB" per l'inglese utilizzato nel Regno Unito. Se non viene menzionato un tag della lingua, la locale predefinita sarà quella del runtime.
• options : un oggetto le cui proprietà vengono utilizzate per personalizzare il formattatore. Ha le seguenti proprietà:

Esempio:

 var formatter = new Intl.DateTimeFormat ('en-GB'); / * restituisce un formattatore che può formattare una data nel formato data inglese britannico * / 

 var options = {weekday: 'short'}; var formatter = new Intl.DateTimeFormat ('en-GB', opzioni); / * restituisce un formattatore in grado di formattare una data nel formato data inglese britannico * insieme al giorno della settimana in notazione breve come 'Gio' per giovedì * / 

La funzione di formattazione

L'istanza dell'oggetto DateTimeFormat ha un proprietà accessor (getter) chiamato format che restituisce una funzione che formatta una Date base alle locales e alle options trovate nell'istanza DateTimeFormat .

La funzione accetta un oggetto Date o undefined come argomento opzionale e restituisce una string nel formato data richiesto.

Nota: se l'argomento è undefined o non fornito, restituisce il valore di Date.now() nel formato data richiesto.

Ecco la sintassi:

 nuovo Intl.DateTimeFormat (). format () // restituirà la data corrente nel formato della data di runtime 

E ora cerchiamo di codificare una semplice formattazione della data.

Cerchiamo di cambiare la lingua e vedere l'output.

Ora è il momento di esaminare le opzioni.

Il metodo toLocaleDateString

Invece di usare un formattatore come mostrato negli esempi precedenti, puoi usare anche Date.prototype.toLocaleString nello stesso modo con gli argomenti locales e options, sono simili ma si consiglia di usare l'oggetto DateTimeFormat quando si hanno troppe date nella tua applicazione.

 var mydate = new Date ('2015/04/22'); var options = {weekday: "short", year: "numeric", month: "long", day: "numeric"}; console.log (mydate.toLocaleDateString ( 'it-IT', opzioni)); // restituisce "Wed, 22 aprile 2015" 

Verifica se le impostazioni locali sono supportate

Per verificare le locales supportate, possiamo usare il metodo supportedLocalesOf dell'oggetto DateTimeFormat . Restituisce un array di tutte le locali di supporto o un array vuoto se nessuna delle impostazioni locali è supportata.

Per il test, aggiungiamo un locale fittizio "blah" nella lista delle impostazioni locali da verificare.

 console.log (Intl.DateTimeFormat.supportedLocalesOf (["zh", "blah", "fa-pes"])); // restituisce Array ["zh", "fa-pes"] 

Supporto del browser

Alla fine di aprile 2015, i principali browser supportano l'API di internazionalizzazione.

• ECMA International: specifica API di internazionalizzazione ECMAScript
• IANA : registro sottotag della lingua
• Norbert's Corner: l'API di internazionalizzazione ECMAScript

5 script di scorrimento di confronto immagine gratuiti

I cursori sovrapposti consentono di effettuare confronti tra due immagini, di solito un tipo pre-dopo, con le due immagini sovrapposte l'una sull'altra. Un cursore che può essere manipolato, può essere trascinato dall'utente per mostrare meno dell'immagine precedente e più dell'immagine successiva, e viceversa.È

(Consigli tecnici e di design)

15 app Android VPN gratuite per navigare in modo anonimo

Tutti sono sempre più preoccupati per la questione della sicurezza di Internet, soprattutto quando si effettuano transazioni tramite cellulare. VPN (Virtual Private Network) è una tecnologia che ti consente di aggiungere un ulteriore livello di sicurezza mentre navighi su Internet senza compromettere la privacy dei dati personali, anche quando usi le reti WiFi pubbliche.C

(Consigli tecnici e di design)