Een definitieve manier om datums voor internationale websites te formatteren
Datumnotaties verschillen per regio en taal, dus het is altijd handig als we een manier kunnen vinden om de datums voor de gebruikers weer te geven, specifiek voor hun taal en regio.
In december 2012 heeft ECMA de specificaties van Internationalization API voor JavaScript vrijgegeven. De Internationalization API helpt ons bepaalde gegevens weer te geven op basis van de taal en de specificatie van de muis. Het kan worden gebruikt om identificeer valuta's, tijdzones en meer.
In deze post zullen we kijken naar datumnotatie met behulp van deze API.
Ken de landinstelling van de gebruiker
Als u de datum wilt weergeven volgens de voorkeurslandinstelling van de gebruiker, moeten we eerst weten wat de voorkeurslandinstelling is. Momenteel is de onfeilbare manier om dat te weten de gebruiker te vragen; laat gebruikers hun voorkeurstaal en regio-instellingen op de webpagina selecteren.
Maar als dat geen optie is, kun je het interpreteren Accept-Language aanvraag header of lees de navigator.language(voor Chrome en Firefox) of navigator.browserLanguage(voor IE) waarden.
Houd er rekening mee dat niet al deze opties de voorkeurstaal van de gebruikersinterface van de browser retourneren.
var language_tag = window.navigator.browserLanguage || window.navigator.language || "En"; // retourneert taallabels zoals 'en-GB'
Controleer op Internationalisatie-API
Om te weten of de browser Internationalization API ondersteunt of niet, kunnen we controleren of het globale object aanwezig is Intl.
if (window.hasOwnPropertyâ €‹("Intl") && typeof Intl === "object") // Internationalisatie API is aanwezig, laat ons dat gebruiken De Intl voorwerp
Intl is een globaal object voor het gebruik van de Internationalization API. Het heeft drie eigenschappen die constructeurs zijn voor drie objecten namelijk collator, Nummer formaat, en DateTimeFormat.
Het object dat we zullen gebruiken is DateTimeFormat waarmee we de datum kunnen indelen volgens verschillende talen.
De DateTimeFormat voorwerp
De DateTimeFormat constructor neemt twee optionele argumenten;
locales- een tekenreeks of een reeks tekenreeksen die de taaltags vertegenwoordigen, bijvoorbeeld; “de” voor Duitse taal, “nl-NL” voor Engels gebruikt in het Verenigd Koninkrijk. Als een taaltag niet wordt vermeld, is de standaardlocale die van runtime.opties- een object waarvan de eigenschappen worden gebruikt om de formatter aan te passen. Het heeft de volgende eigenschappen:
| Eigendom | Omschrijving | Mogelijke waarden |
| dag | Dag van de maand | “2-cijferige”, “numerieke” |
| tijdperk | Tijdperk waarin de datum valt, Ex: BC | “smal”, “kort”, “lang” |
| formatMatcher | Het algoritme dat wordt gebruikt voor het afstemmen van formaten | “basis-”, “beste pasvorm”[Standaard] |
| uur | Vertegenwoordigt uren in de tijd | “2-cijferige”, “numerieke” |
| hour12 | Geeft het 12-uurs formaat aan (waar) of 24-uursformaat (vals) | waar, vals |
| localeMatcher | Het algoritme dat wordt gebruikt voor locale-overeenkomsten | “opzoeken”, “beste pasvorm”[Standaard] |
| minuut | Minuten in de tijd | “2-cijferige”, “numerieke” |
| maand | Maand in een jaar | “2-cijferige”, “numerieke”, “smal”, “kort”, “lang” |
| tweede | Seconden in de tijd | “2-cijferige”, “numerieke” |
| tijdzone | Tijdzone om toe te passen | “UTC”, standaard is runtime tijdzone |
| timeZoneName | Tijdzone van de datum | “kort”, “lang” |
| weekdag | Dag in de week | “smal”, “kort”, “lang” |
| jaar | Jaar van de datum | “2-cijferige”, “numerieke” |
Voorbeeld:
var formatter = new Intl.DateTimeFormat ('en-GB'); / * geeft een formatter terug die een datum kan indelen in Engelse datumnotatie * / var options = weekday: 'short'; var formatter = new Intl.DateTimeFormat ('en-GB', opties); / * geeft een formatter terug die een datum kan indelen in Engelse datumnotatie * samen met de weekdag in korte notatie zoals 'Don' voor donderdag * / De formaat functie
De instantie van de DateTimeFormat object heeft een eigenschap accessor (getter) genaamd formaat die een functie retourneert die a opmaakt Datum gebaseerd op de locales en opties gevonden in de DateTimeFormat aanleg.
De functie duurt a Datum object of onbepaald als een optioneel argument en retourneert een draad in het gevraagde datumformaat.
Notitie: Als het argument dat ook is onbepaald of niet verstrekt, dan wordt de waarde van geretourneerd Date.now () in het gevraagde datumformaat.
Dit is de syntaxis:
nieuw Intl.DateTimeFormat (). format () // zendt de huidige datum terug in de runtime-datumindeling
En laten we nu een eenvoudige datumopmaak coderen.
Laten we de taal wijzigen en de uitvoer bekijken.
Nu is het tijd om naar opties te kijken.
De toLocaleDateString methode
In plaats van een formatter zoals in de bovenstaande voorbeelden te gebruiken, kunt u ook gebruiken Date.prototype.toLocaleString op dezelfde manier met de locales en opties argumenten, ze lijken op elkaar, maar het wordt aanbevolen om de DateTimeFormat object bij het omgaan met te veel datums in uw toepassing.
var mydate = new Date ('2015/04/22'); var options = weekday: "short", year: "numeric", month: "long", day: "numeric"; console.log (mydate.toLocaleDateString ( 'en-GB', opties)); // geeft als resultaat "Wo, 22 april 2015" Test of het locales worden ondersteund
Om te controleren op de ondersteunde locales, we kunnen de methode gebruiken supportedLocalesOf van DateTimeFormat voorwerp. Het retourneert een array van alle ondersteunende landinstellingen of een lege array als geen van de landinstellingen wordt ondersteund.
Laten we voor het testen een dummy-locale toevoegen “blah” in de lijst met te controleren locaties.
console.log (Intl.DateTimeFormat.supportedLocalesOf (["zh", "blah", "fa-pes"])); // geeft Array ["zh", "fa-pes"]
Browserondersteuning
Eind april 2015 ondersteunen grote browsers de Internationalization API.
Referenties
- ECMA Internationaal: ECMAScript Internationalization API Specification
- IANA: Language Subtag Registry
- Norbert's Corner: de ECMAScript Internationalization API
