Definitívny spôsob formátovania dát pre medzinárodné stránky

Formáty dátumov sa líšia v závislosti od regiónu a jazyka, preto je vždy užitočné, ak môžeme nájsť spôsob, ako zobraziť dátumy používateľom, ktoré sú špecifické pre ich jazyk a región.

Späť v decembri 2012 vydal ECMA špecifikácie API pre internacionalizáciu pre JavaScript. Rozhranie API pre internacionalizáciu nám pomáha zobrazovať určité údaje v súlade s jazykovou a fyzickou špecifikáciou. To môže byť použité na identifikovať meny, časové pásma a viac.

V tomto príspevku sa budeme zaoberať formátovanie dátumu pomocou tohto rozhrania API.

Poznať lokalizáciu používateľa

Ak chcete zobraziť dátum podľa preferovaného prostredia používateľa, najprv musíme vedieť, aké je preferované miestne nastavenie. V súčasnej dobe je bezstarostný spôsob, ako vedieť, že je požiadať užívateľa; umožňujú používateľom vybrať si na webovej stránke preferované nastavenia jazyka a regiónu.

Ale ak to nie je možnosť, môžete interpretovať Accept-Language žiadajte hlavičku alebo si prečítajte navigator.language(pre Chrome a Firefox) alebo navigator.browserLanguage(pre hodnoty IE).

Upozorňujeme, že nie všetky tieto možnosti vrátia preferovaný jazyk používateľského rozhrania prehliadača.

 var jazyk_tag = window.navigator.browserLanguage || window.navigator.language || "En"; // vráti jazykové značky ako 'en-GB'

Skontrolujte rozhranie API pre internacionalizáciu

Ak chcete vedieť, či prehliadač podporuje rozhranie API rozhrania Internationalization, alebo nie, môžeme skontrolovať prítomnosť globálneho objektu Intl.

 if (window.hasOwnPropertyâ €‹("Intl") && typeof Intl === "objekt") // Interpretácia API je prítomná, použite to

Intl objekt

Intl je globálnym objektom pre použitie API pre internacionalizáciu. Má tri vlastnosti, ktoré sú konštruktormi pre tri objekty Collator, numberformat, a DateTimeFormat.

Objekt, ktorý budeme používať, je DateTimeFormat čo nám pomôže formátovať dátumový termín podľa rôznych jazykov.

DateTimeFormat objekt

DateTimeFormat konštruktér má dve voliteľné argumenty;

locales - reťazec alebo pole reťazcov, ktoré reprezentujú jazykové značky, napríklad; “de” pre nemecký jazyk, “sk-SK” pre anglické používané v Spojenom kráľovstve. Ak sa jazyková značka nezmieňuje, predvolené prostredie bude bežným jazykom behu.
možnosti - objekt, ktorého vlastnosti sa používajú na prispôsobenie formátovača. Má nasledujúce vlastnosti:

vlastnosť	popis	Možné hodnoty
deň	Deň v mesiaci	“2-miestne”, “číselná”
éra	Dátum, kedy spadá do, Ex: BC	“úzky”, “krátky”, “dlho”
formatMatcher	Algoritmus použitý na prispôsobenie formátu	“basic”, “najlepšie”[štandardné]
hodina	Predstavuje hodiny v čase	“2-miestne”, “číselná”
hour12	Označuje 12-hodinový formát (`pravdivý`) alebo 24-hodinový formát (`nepravdivý`)	`pravdivý`, `nepravdivý`
localeMatcher	Algoritmus použitý na prispôsobenie miest	“vyhľadať”, “najlepšie”[štandardné]
minúta	Minúty v čase	“2-miestne”, “číselná”
mesiac	Mesiac za rok	“2-miestne”, “číselná”, “úzky”, “krátky”, “dlho”
druhý	Sekundy v čase	“2-miestne”, “číselná”
časové pásmo	Časové pásmo, ktoré chcete použiť	“UTC”, predvolená je časová zóna runtime
timeZoneName	Časové pásmo dátumu	“krátky”, “dlho”
všedný deň	Deň v týždni	“úzky”, “krátky”, “dlho”
rok	Rok dátumu	“2-miestne”, “číselná”

Príklad:

 var formátovač = nový Intl.DateTimeFormat ('en-GB'); / * vracia formátovač, ktorý môže formátovať dátum vo formáte britského anglického dátumu * /

 var options = weekday: 'short'); var formatter = nový Intl.DateTimeFormat ('en-GB', možnosti); / * vracia formátovač, ktorý môže formátovať dátum vo formáte britského anglického dátumu * spolu s denným dňom v krátkej notácii ako "Štvrtok" pre štvrtok * /

formát funkcie

Príklad inštancie DateTimeFormat objekt má vlastník accessor (getter) nazvaný formát ktorý vráti funkciu, ktorá formátuje a dátum založený na locales a možnosti nájdené v DateTimeFormat inštancie.

Funkcia trvá a dátum objekt alebo nedefinovaný ako voliteľný argument a vráti a povrázok v požadovanom formáte dátumu.

Poznámka: Ak je argument buď nedefinovaný alebo neposkytol, potom vráti hodnotu Date.now () v požadovanom formáte dátumu.

Tu je syntax:

 nový formát Intl.DateTimeFormat (). () // vráti aktuálny dátum vo formáte dátumu spustenia

A teraz napíšeme jednoduché formátovanie dátumu.

Pozrite si Pen ZGbLdL od Preethi (@rpsthecoder) na CodePen.

Zmeňte jazyk a pozrite sa na výstup.

Pozrite si Pen gpambJ od Preethi (@rpsthecoder) na CodePen.

Teraz je čas pozrieť sa na možnosti.

Pozrite si Pen QbjpvK od Preethi (@rpsthecoder) na CodePen.

toLocaleDateString metóda

Namiesto použitia formátovača, ako je uvedené v príkladoch uvedených vyššie, môžete tiež použiť Date.prototype.toLocaleString rovnakým spôsobom ako locales a možnosti argumenty, sú podobné, ale odporúča sa použiť DateTimeFormat objekt pri riešení príliš veľa dátumov vo vašej prihláške.

 var mydate = new Dátum ('2015/04/22'); var options = deň v týždni: "krátky", rok: "numerický", mesiac: "dlhý", deň: "číselný"; console.log (mydate.toLocaleDateString ( 'sk-SK', možnosti)); // vráti "St, 22. apríla 2015"

Skúste, či locales sú podporované

Kontrola podporovaných položiek locales, metódu môžeme použiť supportedLocalesOf z DateTimeFormat objekt. Vracia pole všetkých podporujúcich lokalizácií alebo prázdne pole, ak nie je podporovaná žiadna z lokalizácií.

Pri testovaní pridajte fiktívne prostredie “bla” v zozname lokalít, ktoré sa majú skontrolovať.

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

Podpora prehliadača

Koncom apríla 2015 podporujú hlavné prehliadače rozhranie API pre internacionalizáciu.

Referencie

ECMA Medzinárodné: Špecifikácia rozhrania API medzinárodnej ECMAScript
IANA: Registrácia jazykových subtagov
Norbertov roh: rozhranie ECMAScript Internationalization API