Ostateczny sposób formatowania dat dla witryn międzynarodowych
Formaty dat różnią się w zależności od regionu i języka, dlatego zawsze pomocne jest znalezienie sposobu wyświetlania dat użytkownikom, w zależności od ich języka i regionu.
W grudniu 2012 r. ECMA opublikowała specyfikację Internationalization API dla JavaScript. Interfejs API internacjonalizacji pomaga nam wyświetlać pewne dane zgodnie z językiem i specyfikacją treści. Można to wykorzystać identyfikuj waluty, strefy czasowe i więcej.
W tym poście będziemy się przyglądać formatowanie daty używając tego API.
Poznaj ustawienia regionalne użytkownika
Aby wyświetlić datę według preferowanych ustawień narodowych użytkownika, najpierw musimy wiedzieć, co to jest preferowane ustawienia regionalne. Obecnie niezawodny sposób na to, aby zapytać użytkownika; pozwól użytkownikom wybrać preferowane ustawienia języka i regionu na stronie internetowej.
Ale jeśli to nie jest opcja, możesz zinterpretować Akceptuj-język żądaj nagłówka lub przeczytaj język nawigatora(dla Chrome i Firefox) lub navigator.browserLanguage(dla IE) wartości.
Pamiętaj, że nie wszystkie te opcje zwracają preferowany język interfejsu przeglądarki.
var language_tag = window.navigator.browserLanguage || window.navigator.language || „en”; // zwraca znaczniki języka, takie jak „en-GB”
Sprawdź API internacjonalizacji
Aby wiedzieć, czy przeglądarka obsługuje API internacjonalizacji, czy nie, możemy sprawdzić obecność globalnego obiektu Intl.
if (window.hasOwnProperty‹("Intl") && typeof Intl === "object") // Interfejs internacjonalizacji jest obecny, użyjmy tego The Intl obiekt
Intl jest obiektem globalnym do korzystania z API internacjonalizacji. Ma trzy właściwości, które są konstruktorami dla trzech obiektów, mianowicie Zbieracz, Format liczbowy, i DateTimeFormat.
Obiekt, którego będziemy używać, to DateTimeFormat co pomoże nam sformatować datę w różnych językach.
The DateTimeFormat obiekt
The DateTimeFormat konstruktor przyjmuje dwa opcjonalne argumenty;
lokalizacje- ciąg lub tablica ciągów znaków, które reprezentują na przykład znaczniki językowe; “de” dla języka niemieckiego, “pl-GB” dla języka angielskiego używanego w Wielkiej Brytanii. Jeśli znacznik języka nie jest wymieniony, domyślnym ustawieniem narodowym będzie język wykonawczy.opcje- obiekt, którego właściwości są używane do dostosowania formatyzatora. Ma następujące właściwości:
| własność | Opis | Możliwa wartość |
| dzień | Dzień miesiąca | “2-cyfrowy”, “numeryczny” |
| era | Era data przypada, np .: BC | “wąski”, “krótki”, “długie” |
| formatMatcher | Algorytm używany do dopasowywania formatu | “podstawowy”, “najlepiej dopasowana”[Domyślna] |
| godzina | Reprezentuje godziny w czasie | “2-cyfrowy”, “numeryczny” |
| godzina12 | Wskazuje format 12-godzinny (prawdziwe) lub format 24-godzinny (fałszywy) | prawdziwe, fałszywy |
| localeMatcher | Algorytm używany do dopasowywania ustawień regionalnych | “wyszukiwanie”, “najlepiej dopasowana”[Domyślna] |
| minuta | Minuty w czasie | “2-cyfrowy”, “numeryczny” |
| miesiąc | Miesiąc za rok | “2-cyfrowy”, “numeryczny”, “wąski”, “krótki”, “długie” |
| druga | Sekundy w tym czasie | “2-cyfrowy”, “numeryczny” |
| strefa czasowa | Strefa czasowa do zastosowania | “UTC”, domyślna jest strefa czasowa czasu wykonywania |
| timeZoneName | Strefa czasowa daty | “krótki”, “długie” |
| dzień powszedni | Dzień tygodnia | “wąski”, “krótki”, “długie” |
| rok | Rok daty | “2-cyfrowy”, “numeryczny” |
Przykład:
var formatter = new Intl.DateTimeFormat ('en-GB'); / * zwraca formater, który może sformatować datę w brytyjskim formacie daty * / var options = weekday: 'short'; var formatter = new Intl.DateTimeFormat ('en-GB', opcje); / * zwraca formatyzator, który może sformatować datę w brytyjskim formacie daty * wraz z dniem tygodnia w skrócie, np. „Czw” na czwartek * / The format funkcjonować
Instancja DateTimeFormat obiekt ma wywoływany atrybut dostępu (getter) format która zwraca funkcję, która formatuje a Data na podstawie lokalizacje i opcje znalezione w DateTimeFormat instancja.
Funkcja przyjmuje Data obiekt lub niezdefiniowany jako argument opcjonalny i zwraca a strunowy w żądanym formacie daty.
Uwaga: Jeśli argument jest albo niezdefiniowany lub nie podany, wtedy zwraca wartość Date.now () w żądanym formacie daty.
Oto składnia:
new Intl.DateTimeFormat (). format () // zwróci bieżącą datę w formacie daty wykonania
A teraz kodujemy proste formatowanie daty.
Zmieńmy język i zobaczmy wynik.
Teraz nadszedł czas, aby zajrzeć do opcji.
The toLocaleDateString metoda
Zamiast używać formatyzatora, jak pokazano w powyższych przykładach, możesz również użyć Date.prototype.toLocaleString w ten sam sposób z lokalizacje i opcje argumenty są podobne, ale zaleca się użycie DateTimeFormat obiekt, gdy mamy do czynienia ze zbyt dużą liczbą dat w aplikacji.
var mydate = new Date ('2015/04/22'); var options = weekday: "short", year: "numeric", month: "long", day: "numeric"; console.log (mydate.toLocaleDateString ('en-GB', opcje)); // zwraca „środa, 22 kwietnia 2015 r.” Sprawdź, czy lokalizacje są obsługiwane
Aby sprawdzić obsługiwane lokalizacje, możemy użyć tej metody supportedLocalesOf z DateTimeFormat obiekt. Zwraca tablicę wszystkich obsługiwanych ustawień narodowych lub pustą tablicę, jeśli żadna z lokalizacji nie jest obsługiwana.
Do testów dodajmy obojętne ustawienia regionalne “bla” na liście lokalizacji do sprawdzenia.
console.log (Intl.DateTimeFormat.supportedLocalesOf (["zh", "blah", "fa-pes"])); // zwraca tablicę ["zh", "fa-pes"]
Obsługa przeglądarki
Pod koniec kwietnia 2015 r. Główne przeglądarki obsługują API internacjonalizacji.
Referencje
- ECMA International: ECMAScript Internationalization API Specification
- IANA: Rejestr subtagów językowych
- Norbert's Corner: API internacjonalizacji ECMAScript
