Eine endgültige Möglichkeit, Datumsangaben für internationale Standorte zu formatieren
Datumsformate variieren je nach Region und Sprache. Daher ist es immer hilfreich, wenn wir den Benutzern die Möglichkeit bieten, den Benutzern Datumsangaben anzuzeigen, die für ihre Sprache und Region spezifisch sind.
Bereits im Dezember 2012 veröffentlichte ECMA die Spezifikationen der Internationalization API for JavaScript. Die Internationalisierungs-API hilft uns bei der Anzeige bestimmter Daten gemäß der Sprache und den kulturellen Spezifikationen. Es kann verwendet werden identifizieren Währungen, Zeitzonen und mehr.
In diesem Beitrag werden wir nachsehen Datumsformatierung mit dieser API.
Kennen Sie das Gebietsschema des Benutzers
Um das Datum als bevorzugtes Gebietsschema eines Benutzers anzuzeigen, müssen wir zunächst wissen, welches das bevorzugte Gebietsschema ist. Derzeit ist die narrensichere Methode, den Benutzer zu fragen; Benutzer können ihre bevorzugten Sprach- und Regionseinstellungen auf der Webseite auswählen.
Wenn dies jedoch keine Option ist, können Sie das interpretieren Accept-Language Header anfordern oder lesen navigator.language(für Chrome und Firefox) oder navigator.browserLanguage(für IE) Werte.
Bitte beachten Sie, dass nicht alle diese Optionen die bevorzugte Sprache der Browser-Benutzeroberfläche zurückgeben.
var language_tag = window.navigator.browserLanguage || window.navigator.language || "en"; // gibt Sprachkennungen wie 'en-GB' zurück
Überprüfen Sie die Internationalisierungs-API
Um festzustellen, ob der Browser die Internationalisierungs-API unterstützt, können wir das Vorhandensein des globalen Objekts überprüfen Intl.
if (window.hatOwnProperty '‹("Intl") && typeof Intl === "object") // Die Internationalisierungs-API ist vorhanden. Verwenden Sie diese Option. Das Intl Objekt
Intl ist ein globales Objekt für die Verwendung der Internationalisierungs-API. Es hat drei Eigenschaften, nämlich Konstruktoren für drei Objekte Collator, Zahlenformat, und DateTimeFormat.
Das Objekt, das wir verwenden werden, ist DateTimeFormat Das hilft uns, Datum und Uhrzeit nach verschiedenen Sprachen zu formatieren.
Das DateTimeFormat Objekt
Das DateTimeFormat Konstruktor akzeptiert zwei optionale Argumente.
locales- ein String oder ein Array von Strings, die zum Beispiel die Sprach-Tags darstellen; “de” für die deutsche Sprache, “en-GB” für Englisch in Großbritannien. Wenn ein Sprachentag nicht erwähnt wird, ist das Standardgebietsschema das der Laufzeitumgebung.Optionen- ein Objekt, dessen Eigenschaften zur Anpassung des Formatierers verwendet werden. Es hat die folgenden Eigenschaften:
| Eigentum | Beschreibung | Mögliche Werte |
| Tag | Tag des Monats | “2-stellig”, “numerisch” |
| Epoche | Ära, in die das Datum fällt, Ex: BC | “eng”, “kurz”, “lange” |
| formatMatcher | Der für den Formatabgleich verwendete Algorithmus | “Basic”, “beste Passform”[Standard] |
| Stunde | Stunden in der Zeit darstellen | “2-stellig”, “numerisch” |
| Stunde12 | Zeigt das 12-Stunden-Format an (wahr) oder 24-Stunden-Format (falsch) | wahr, falsch |
| localeMatcher | Der für das Gebietsschemaabgleich verwendete Algorithmus | “Sieh nach oben”, “beste Passform”[Standard] |
| Minute | Minuten in der Zeit | “2-stellig”, “numerisch” |
| Monat | Monat im Jahr | “2-stellig”, “numerisch”, “eng”, “kurz”, “lange” |
| zweite | Sekunden in der Zeit | “2-stellig”, “numerisch” |
| Zeitzone | Anzuwendende Zeitzone | “koordinierte Weltzeit”, Die Standardeinstellung ist die Laufzeitzeitzone |
| timeZoneName | Zeitzone des Datums | “kurz”, “lange” |
| Wochentag | Tag in der Woche | “eng”, “kurz”, “lange” |
| Jahr | Jahr des Datums | “2-stellig”, “numerisch” |
Beispiel:
var formatter = new Intl.DateTimeFormat ('en-GB'); / * gibt einen Formatierer zurück, der ein Datum im englischen Datumsformat formatieren kann * / var options = Wochentag: 'short'; var formatter = new Intl.DateTimeFormat ('en-GB', Optionen); / * gibt ein Formatierungsprogramm zurück, das ein Datum im britischen englischen Datumsformat formatieren kann * zusammen mit dem Wochentag in Kurznotation wie "Do" für Donnerstag * / Das Format Funktion
Die Instanz des DateTimeFormat object hat einen Eigenschafts-Accessor (Getter), der aufgerufen wird Format die eine Funktion zurückgibt, die a formatiert Datum basierend auf locales und Optionen im gefunden DateTimeFormat Beispiel.
Die Funktion dauert a Datum Objekt oder nicht definiert als optionales Argument und gibt a zurück Schnur im gewünschten Datumsformat.
Hinweis: Wenn das Argument entweder ist nicht definiert oder nicht angegeben, dann wird der Wert von zurückgegeben Date.now () im gewünschten Datumsformat.
Hier ist die Syntax:
new Intl.DateTimeFormat (). format () // gibt das aktuelle Datum im Laufzeitformat zurück
Und jetzt lassen Sie uns eine einfache Datumsformatierung vornehmen.
Lass uns die Sprache ändern und die Ausgabe sehen.
Nun ist es an der Zeit, nach Optionen zu suchen.
Das toLocaleDateString Methode
Anstelle eines Formatierers wie in den obigen Beispielen können Sie auch verwenden Date.prototype.toLocaleString auf die gleiche Weise mit der locales und Optionen Argumente, sie sind ähnlich, aber es wird empfohlen, die DateTimeFormat Objekt, wenn zu viele Daten in Ihrer Anwendung verarbeitet werden.
var mydate = neues Datum ('2015/04/22'); var options = Wochentag: "kurz", Jahr: "numerisch", Monat: "lang", Tag: "numerisch"; console.log (mydate.toLocaleDateString ('en-GB', Optionen)); // kehrt zurück "Mi, 22. April 2015" Testen Sie, ob die locales sind unterstützt
Um nach dem unterstützten zu suchen locales, Wir können die Methode verwenden unterstütztLocalesOf von DateTimeFormat Objekt. Es gibt ein Array aller unterstützenden Gebietsschemas zurück oder ein leeres Array, wenn keines der Gebietsschemas unterstützt wird.
Fügen Sie zum Testen ein Dummy-Gebietsschema hinzu “blah” in der Liste der zu überprüfenden Locales.
console.log (Intl.DateTimeFormat.supportedLocalesOf (["zh", "blah", "fa-pes"])); // gibt Array ["zh", "fa-pes"] zurück
Browser-Unterstützung
Ende April 2015 unterstützen wichtige Browser die Internationalization API.
Verweise
- ECMA International: ECMAScript Internationalization API-Spezifikation
- IANA: Sprache Subtag Registry
- Norbert's Corner: Die ECMAScript-Internationalisierungs-API
