En endelig måde at formatere datoer på internationale websteder
Datoformaterne varierer med region og sprog, så det er altid nyttigt, hvis vi kan finde en måde at vise datoerne på brugerne, specifikt for deres sprog og region.
Tilbage i december 2012 udgav ECMA specifikationerne for Internationalization API for JavaScript. Internationaliserings API hjælper os med at vise bestemte data i henhold til sprog- og cutural-specifikationen. Det kan bruges til identificere valutaer, tidszoner og mere.
I dette indlæg vil vi se nærmere på datoformatering bruger denne API.
Kend brugerens lokalitet
For at vise datoen som brugerens foretrukne lokalitet, skal vi først vide, hvad den foretrukne lokalitet er. I øjeblikket er den tåbelige måde at vide, at det er at spørge brugeren; Lad brugerne vælge deres foretrukne sprog og region indstillinger på websiden.
Men hvis det ikke er en mulighed, kan du fortolke Accept-Language forespørgselsoverskrift eller læs navigator.language(for Chrome og Firefox) eller navigator.browserLanguage(for IE) værdier.
Vær venlig at vide, at ikke alle disse muligheder returnerer det foretrukne sprog i browserens brugergrænseflade.
var language_tag = window.navigator.browserLanguage || window.navigator.language || "Da"; // returnerer sprogmærker som 'en-GB'
Tjek for internationalisering API
For at vide, om browseren understøtter internationaliserings-API eller ej, kan vi tjekke for tilstedeværelsen af det globale objekt Intl.
hvis (window.hasOwnPropertyâ €‹("Intl") && typeof Intl === "objekt") // Internationalization API er til stede, lad os bruge det Det Intl objekt
Intl er et globalt formål at bruge Internationalization API. Det har tre egenskaber, som er konstruktører til tre objekter nemlig kollator, TalFormat, og DateTimeFormat.
Det objekt vi skal bruge er DateTimeFormat som vil hjælpe os med at formatere datatid som pr. forskellige sprog.
Det DateTimeFormat objekt
Det DateTimeFormat Konstruktøren tager to valgfrie argumenter;
locales- en streng eller en række strings, der repræsenterer sprogmærkerne, for eksempel; “de” for tysk sprog, “da-DK” til engelsk, der anvendes i Det Forenede Kongerige. Hvis et sprogmærke ikke er nævnt, er standard-lokaliteten det samme som for runtime.muligheder- et objekt, hvis egenskaber bruges til at tilpasse formateringen. Det har følgende egenskaber:
| Ejendom | Beskrivelse | Mulige værdier |
| dag | Månedens dag | “2-cifrede”, “numerisk” |
| æra | Era, datoen falder ind, Ex: BC | “smal”, “kort”, “lang” |
| formatMatcher | Den algoritme, der anvendes til formatmatchning | “grundlæggende”, “bedste pasform”[Standard] |
| time | Representerer timer i tiden | “2-cifrede”, “numerisk” |
| hour12 | Angiver 12-timers format (rigtigt) eller 24-timers format (falsk) | rigtigt, falsk |
| localeMatcher | Algoritmen bruges til lokal søgning | “kig op”, “bedste pasform”[Standard] |
| minut | Minutter i tiden | “2-cifrede”, “numerisk” |
| måned | Måned om året | “2-cifrede”, “numerisk”, “smal”, “kort”, “lang” |
| sekund | Sekunder i tiden | “2-cifrede”, “numerisk” |
| tidszone | Tidszone at anvende | “UTC”, Standard er runtime-tidszone |
| timeZoneName | Datoens tidszone | “kort”, “lang” |
| ugedag | Dag i ugen | “smal”, “kort”, “lang” |
| år | År af datoen | “2-cifrede”, “numerisk” |
Eksempel:
var formatter = ny Intl.DateTimeFormat ('da-GB'); / * returnerer en formatter, der kan formatere en dato i engelsk engelsk dato format * / var options = hverdag: 'kort'; var formatter = ny Intl.DateTimeFormat ('da-GB', indstillinger); / * returnerer en formatter, der kan formatere en dato i engelsk engelsk format * sammen med ugedagen i kort notat som 'th' til torsdag * / Det format fungere
Eksemplet på DateTimeFormat objekt har en ejendomstilgang (getter) kaldet format som returnerer en funktion, der formaterer a Dato baseret på locales og muligheder fundet i DateTimeFormat instans.
Funktionen tager en Dato objekt eller undefined som et valgfrit argument og returnerer a snor i det ønskede datoformat.
Bemærk: Hvis argumentet er enten undefined eller ikke leveret, returnerer den værdien af Date.now () i det ønskede datoformat.
Her er syntaxen:
ny Intl.DateTimeFormat (). format () // vil returnere den aktuelle dato i runtime dato format
Og lad os nu kode en enkel datoformatering.
Lad os ændre sproget og se output.
Nu er det tid til at se på muligheder.
Det toLocaleDateString metode
I stedet for at bruge en formatter som vist i ovenstående eksempler, kan du også bruge Date.prototype.toLocaleString på samme måde med locales og muligheder argumenter, de er ens, men det anbefales at bruge DateTimeFormat objekt, når du beskæftiger sig med for mange datoer i din ansøgning.
var mydate = ny dato ('2015/04/22'); var options = hverdag: "kort", år: "numerisk", måned: "lang", dag: "numerisk"; console.log (mydate.toLocaleDateString ( 'en-GB', optioner)); // returnerer "onsdag den 22. april 2015" Test om locales understøttes
For at tjekke for den understøttede locales, vi kan bruge metoden supportedLocalesOf af DateTimeFormat objekt. Det returnerer en matrix af alle understøttende lokaliteter eller et tomt array, hvis ingen af lokalerne understøttes.
Til test, lad os tilføje en dummy locale “blah” i listen over lokaliteter, der skal kontrolleres.
console.log (Intl.DateTimeFormat.supportedLocalesOf (["zh", "blah", "fa-pes"])); // returnerer Array ["zh", "fa-pes"]
Browser Support
Ved udgangen af april 2015 understøtter større browsere Internationalization API.
Referencer
- ECMA International: ECMAScript Internationalization API Specifikation
- IANA: Language Subtag Registry
- Norbert's Corner: ECMAScript Internationalization API
