Ett definitivt sätt att formatera datum för internationella webbplatser
Datumformat varierar med region och språk så det är alltid till hjälp om vi kan hitta sätt att visa datum för användarna, specifika för deras språk och region.
Tillbaka i december 2012 släppte ECMA specifikationerna för Internationalization API för JavaScript. Internationaliserings API hjälper oss att visa viss data enligt språkspecifikationen. Det kan användas till identifiera valutor, tidszoner och mer.
I det här inlägget kommer vi att titta på datumformatering använder detta API.
Känn användarens språk
För att visa datumet enligt användarens föredragna språk, måste vi först veta vad det föredragna landet är. För närvarande är det dåligt säkra sättet att veta det att fråga användaren; Låt användarna välja sina föredragna språk- och regioninställningar på webbsidan.
Men om det inte är ett alternativ kan du tolka Accept-Language begära rubrik eller läs navigator.language(för Chrome och Firefox) eller navigator.browserLanguage(för IE) -värden.
Tänk på att inte alla dessa alternativ returnerar det språk som används i webbläsarens användargränssnitt.
var language_tag = window.navigator.browserLanguage || window.navigator.language || "En"; // returnerar språkkoder som "en-GB"
Kolla på Internationalization API
För att veta om webbläsaren stöder Internationalization API eller inte, kan vi kontrollera om det globala objektet finns Intl.
if (window.hasOwnPropertyâ €‹("Intl") && typof Intl === "objekt") // Internationalization API är närvarande, låt oss använda det De Intl objekt
Intl är ett globalt objekt för att använda Internationalization API. Det har tre egenskaper som är konstruktörer för tre objekt nämligen Collator, Number, och DateTimeFormat.
Föremålet vi ska använda är DateTimeFormat vilket hjälper oss att formatera datumtid enligt olika språk.
De DateTimeFormat objekt
De DateTimeFormat konstruktören tar två valfria argument;
locales- en sträng eller en rad strängar som representerar språkområdena, till exempel; “de” för tyska språket, “sv-SE” för engelska som används i Storbritannien. Om en språktagg inte nämns, är standard-landstiden den som körtid.alternativ- ett objekt vars egenskaper används för att anpassa formateraren. Den har följande egenskaper:
| Fast egendom | Beskrivning | Möjliga värden |
| dag | Månadens dag | “2-siffrigt”, “numerisk” |
| epok | Tidsdatumet faller till, ex: BC | “smal”, “kort”, “lång” |
| formatMatcher | Den algoritm som används för att matcha format | “grundläggande”, “bästa passform”[Standard] |
| timme | Representerar timmar på tiden | “2-siffrigt”, “numerisk” |
| hour12 | Indikerar 12-timmarsformat (Sann) eller 24-timmarsformat (falsk) | Sann, falsk |
| localeMatcher | Algoritmen används för lokal matchning | “slå upp”, “bästa passform”[Standard] |
| minut | Protokoll i tiden | “2-siffrigt”, “numerisk” |
| månad | Månad på ett år | “2-siffrigt”, “numerisk”, “smal”, “kort”, “lång” |
| andra | Sekunder i tiden | “2-siffrigt”, “numerisk” |
| tidszon | Tidszon att tillämpa | “UTC”, standard är runtime tidzon |
| timeZoneName | Datumets tidzon | “kort”, “lång” |
| veckodag | Dag i veckan | “smal”, “kort”, “lång” |
| år | År av dagen | “2-siffrigt”, “numerisk” |
Exempel:
var formatter = ny Intl.DateTimeFormat ('sv-GB'); / * returnerar en formaterare som kan formatera ett datum i brittisk engelsk datumformat * / var options = vardag: 'short'; var formatter = ny Intl.DateTimeFormat ('en-GB', alternativ); / * returnerar en formaterare som kan formatera ett datum i brittisk engelsk datumformat * tillsammans med veckodagen i kort notation som "Thu" för torsdag * / De formatera fungera
Förekomsten av DateTimeFormat objektet har en egenskapsaccessor (getter) kallad formatera som returnerar en funktion som formaterar a Datum baserat på locales och alternativ hittades i DateTimeFormat exempel.
Funktionen tar a Datum objekt eller odefinierad som ett valfritt argument och returnerar a sträng i önskat datumformat.
Notera: Om argumentet är heller odefinierad eller inte tillhandahålls, returnerar det värdet av Date.now () i önskat datumformat.
Här är syntaxen:
nya Intl.DateTimeFormat (). format () // kommer att returnera det aktuella datumet i runtime-datumformatet
Och nu låt oss koda en enkel datumformatering.
Låt oss ändra språket och se produktionen.
Nu är det dags att titta på alternativ.
De toLocaleDateString metod
I stället för att använda en formaterare som visas i ovanstående exempel kan du också använda Date.prototype.toLocaleString på samma sätt med locales och alternativ argument, de är likartade men det rekommenderas att använda DateTimeFormat objekt när du hanterar för många datum i din ansökan.
var mydate = nytt datum ("2015/04/22"); var options = veckodag: "kort", år: "numerisk", månad: "lång", dag: "numerisk"; console.log (mydate.toLocaleDateString ( 'en-GB', optioner)); // returnerar "onsdag 22 april 2015" Testa om locales stöds
Att kontrollera om det stöds locales, vi kan använda metoden supportedLocalesOf av DateTimeFormat objekt. Den returnerar en uppsättning av alla stödjande adresser eller en tom matris om ingen av platserna stöds.
För testning, låt oss lägga till en dummy-plats “bla” i listan över platser som ska kontrolleras.
console.log (Intl.DateTimeFormat.supportedLocalesOf (["zh", "blah", "fa-pes"))); // returnerar Array ["zh", "fa-pes"]
Webbläsarsupport
I slutet av april 2015 stödjer stora webbläsare Internationalization API.
referenser
- ECMA Internationellt: API-specifikation för ECMAScript Internationalization
- IANA: Språk Subtag Register
- Norbert's Corner: ECMAScript Internationalization API
