En endelig måte å formatere datoer for internasjonale nettsteder
Datoformater varierer med region og språk, så det er alltid nyttig hvis vi kan finne en måte å vise datoene til brukerne, spesifikt for språk og region.
Tilbake i desember 2012 utgav ECMA spesifikasjonene for Internationalization API for JavaScript. Internasjonaliserings API hjelper oss med å vise bestemte data i henhold til språkspesifikasjonen. Det kan brukes til identifisere valutaer, tidssoner og mer.
I dette innlegget vil vi se nærmere på datoformatering bruker denne APIen.
Kjenn brukerens lokalitet
For å vise datoen som brukerens foretrukne lokalitet, må vi først vite hva den foretrukne lokaliteten er. Foreløpig den idiotiske måten å vite det er å spørre brukeren; la brukerne velge deres foretrukne språk og region innstillinger på nettsiden.
Men hvis det ikke er et alternativ, kan du tolke Accept-Language Be om header eller les navigator.language(for Chrome og Firefox) eller navigator.browserLanguage(for IE) verdier.
Vær oppmerksom på at ikke alle disse alternativene returnerer det foretrukne språket til nettleserens brukergrensesnitt.
var language_tag = window.navigator.browserLanguage || window.navigator.language || "No"; // returnerer språkkoder som 'en-GB'
Sjekk for Internationalization API
For å vite om nettleseren støtter Internationalization API eller ikke, kan vi se etter tilstedeværelsen av det globale objektet Intl.
if (window.hasOwnPropertyâ €‹("Intl") && typeof Intl === "objekt") // Internationalization API er tilstede, la oss bruke det De Intl gjenstand
Intl er et globalt objekt for bruk av Internationalization API. Den har tre egenskaper som er konstruktører for tre gjenstander nemlig samle, NumberFormat, og DateTimeFormat.
Objektet vi skal bruke er DateTimeFormat som vil hjelpe oss med å formatere datatid som for forskjellige språk.
De DateTimeFormat gjenstand
De DateTimeFormat Konstruktøren tar to valgfrie argumenter;
steder- en streng eller en rekke strenger som representerer språketikene, for eksempel; “de” for tysk språk, “en-GB” for engelsk brukt i Storbritannia. Hvis en språkkode ikke er nevnt, vil standard lokalet være det med kjøretid.opsjoner- et objekt hvis egenskaper brukes til å tilpasse formateringen. Den har følgende egenskaper:
| Eiendom | Beskrivelse | Mulige verdier |
| dag | Dag i måneden | “2-sifret”, “numerisk” |
| era | Era datoen faller inn, Eks: BC | “smal”, “kort”, “lang” |
| formatMatcher | Algoritmen brukes til formatmatching | “grunnleggende”, “passer best”[Misligholde] |
| time | Representerer timer i tiden | “2-sifret”, “numerisk” |
| hour12 | Indikerer 12-timers format (ekte) eller 24-timers format (falsk) | ekte, falsk |
| localeMatcher | Algoritmen som brukes til lokalavstemming | “se opp”, “passer best”[Misligholde] |
| minutt | Minutter i tiden | “2-sifret”, “numerisk” |
| måned | Måned om året | “2-sifret”, “numerisk”, “smal”, “kort”, “lang” |
| sekund | Sekunder i tiden | “2-sifret”, “numerisk” |
| tidssone | Tidssone å søke på | “UTC”, standard er kjøretid tidssonen |
| timeZoneName | Tidssone for datoen | “kort”, “lang” |
| ukedag | Dag i uken | “smal”, “kort”, “lang” |
| år | År av datoen | “2-sifret”, “numerisk” |
Eksempel:
var formatter = ny Intl.DateTimeFormat ('no-GB'); / * returnerer en formatter som kan formatere en dato i britisk engelsk datoformat * / var options = ukedag: 'kort'; var formatter = ny Intl.DateTimeFormat ('no-GB', alternativer); / * returnerer en formatter som kan formatere en dato i britisk engelsk datoformat * sammen med ukedagene i kort notat som 'Thu' for torsdag * / De format funksjon
Eksemplet på DateTimeFormat Objektet har en eiendomstilgang (getter) kalt format som returnerer en funksjon som formaterer a Dato basert på steder og opsjoner funnet i DateTimeFormat forekomst.
Funksjonen tar a Dato objekt eller udefinert som et valgfritt argument og returnerer a string i ønsket datoformat.
Merk: Hvis argumentet er enten udefinert eller ikke oppgitt, returnerer den verdien av Date.now () i ønsket datoformat.
Her er syntaksen:
ny Intl.DateTimeFormat (). format () // vil returnere gjeldende dato i runtime-datoformatet
Og nå la oss kode en enkel datoformatering.
La oss endre språket og se utgangen.
Nå er det på tide å se på alternativer.
De toLocaleDateString metode
I stedet for å bruke en formatter som vist i eksemplene ovenfor, kan du også bruke Date.prototype.toLocaleString på samme måte med steder og opsjoner argumenter, de er liknende, men det anbefales å bruke DateTimeFormat objekt når du arbeider med for mange datoer i søknaden din.
var mydate = ny dato ('2015/04/22'); var options = ukedag: "kort", år: "numerisk", måned: "lang", dag: "numerisk"; console.log (mydate.toLocaleDateString ( 'en-GB', opsjoner)); // returnerer "onsdag 22. april 2015" Test om steder støttes
For å sjekke om de støttes steder, vi kan bruke metoden supportedLocalesOf av DateTimeFormat gjenstand. Den returnerer en rekke av alle støttende lokaliteter eller en tom rekkefølge hvis ingen av lokalene støttes.
For testing, la oss legge til en dummy locale “blah” i listen over lokaler som skal kontrolleres.
console.log (Intl.DateTimeFormat.supportedLocalesOf (["zh", "blah", "fa-pes"])); // returnerer Array ["zh", "fa-pes"]
Nettleserstøtte
Ved slutten av april 2015 støtter de store nettleserne Internationaliserings API.
referanser
- ECMA Internasjonalt: API-spesifikasjon for ECMAScript Internationalization
- IANA: Språk Subtag Register
- Norbert's Corner: ECMAScript Internationalization API
