Eine definitive Möglichkeit zum Formatieren von Daten für internationale Websites
Datumsformate variieren je nach Region und Sprache. Daher ist es immer hilfreich, wenn wir eine Möglichkeit finden, den Benutzern die Daten für ihre Sprache und Region anzuzeigen.
Im Dezember 2012 veröffentlichte ECMA die Spezifikationen der Internationalisierungs-API für JavaScript. Die Internationalisierungs-API hilft uns dabei, bestimmte Daten entsprechend der Sprache und der kulturellen Spezifikation anzuzeigen. Es kann verwendet werden, um Währungen, Zeitzonen und mehr zu identifizieren .
In diesem Beitrag werden wir die Datumsformatierung mit dieser API untersuchen.
Kenne das Gebietsschema des Benutzers
Um das Datum nach dem bevorzugten Gebietsschema des Benutzers anzuzeigen, müssen wir zuerst wissen, welches bevorzugte Gebietsschema es ist. Zur Zeit ist die narrensichere Art das zu wissen, den Benutzer zu fragen; Lassen Sie die Benutzer ihre bevorzugten Sprach- und Regionseinstellungen auf der Webseite auswählen.
Wenn dies jedoch keine Option ist, können Sie den Accept-Language
Anforderungsheader interpretieren oder die Werte navigator.language
(für Chrome und Firefox) oder navigator.browserLanguage
(für IE) lesen.
Bitte beachten Sie, dass nicht alle diese Optionen die bevorzugte Sprache der Benutzeroberfläche des Browsers zurückgeben.
var language_tag = window.navigator.browserLanguage || window.navigator.language || "en"; // gibt Sprachtags wie 'en-GB' zurück
Suchen Sie nach Internationalisierungs-API
Um zu wissen, ob der Browser die Internationalisierungs-API unterstützt oder nicht, können wir nach dem Vorhandensein des globalen Objekts Intl
.
if (window.hasOwnProperty <("Intl") && typeof Intl === "Objekt") {// Internationalisierungs-API ist vorhanden, lassen Sie uns das verwenden}
Das Intl- Objekt
Intl
ist ein globales Objekt für die Verwendung der Internationalisierungs-API. Es hat drei Eigenschaften, die Konstruktoren für drei Objekte sind: NumberFormat
, DateTimeFormat
und DateTimeFormat
.
Das Objekt, das wir verwenden werden, ist DateTimeFormat
dem wir die Datumszeit in verschiedenen Sprachen formatieren können.
Das DateTimeFormat- Objekt
Der DateTimeFormat
Konstruktor benötigt zwei optionale Argumente.
locales
- eine Zeichenfolge oder ein Array von Zeichenfolgen, die beispielsweise die Sprach-Tags darstellen; "De" für die deutsche Sprache, "en-GB" für die englische Sprache, die in Großbritannien verwendet wird. Wenn ein Sprach-Tag nicht erwähnt wird, ist das Standard-Gebietsschema das der Laufzeit.options
- ein Objekt, dessen Eigenschaften zum Anpassen des Formatierungsprogramms verwendet werden. Es hat folgende Eigenschaften:
Eigentum | Beschreibung | Mögliche Werte |
Tag | Tag des Monats | "2-stellig", "numerisch" |
Epoche | Era das Datum fällt in, Bsp .: BC | "Eng", "kurz", "lang" |
formatMatcher | Der für die Formatanpassung verwendete Algorithmus | "Basis", "beste Passform" [ Standard ] |
Stunde | Stellt Stunden in der Zeit dar | "2-stellig", "numerisch" |
Stunde12 | Zeigt das 12-Stunden-Format ( true ) oder das 24-Stunden-Format ( false ) an | true , false |
localeMatcher | Der Algorithmus, der für die Ländereinstellung verwendet wird | "Nachschlagen", "beste Passform" [ Standard ] |
Minute | Minuten in der Zeit | "2-stellig", "numerisch" |
Monat | Monat in einem Jahr | "2-stellig", "numerisch", "schmal", "kurz", "lang" |
zweite | Sekunden in der Zeit | "2-stellig", "numerisch" |
Zeitzone | Zeitzone für die Anwendung | "UTC", Standard ist die Laufzeit-Zeitzone |
timeZoneName | Zeitzone des Datums | "kurz lang" |
Wochentag | Tag in der Woche | "Eng", "kurz", "lang" |
Jahr | Jahr des Datums | "2-stellig", "numerisch" |
Beispiel:
var formatter = new Intl.DateTimeFormat ('de-GB'); / * gibt einen Formatierer zurück, der ein Datum im englischen Datumsformat formatieren kann * /
var options = {Wochentag: 'kurz'}; var formatter = new Intl.DateTimeFormat ('en-GB', Optionen); / * gibt einen Formatierer zurück, der ein Datum im englischen Datumsformat * zusammen mit dem Wochentag in kurzer Schreibweise wie 'Thu' für Donnerstag formatieren kann * /
Die Formatfunktion
Die Instanz des DateTimeFormat
Objekts hat ein Eigenschaftsaccessor (Getter) namens format
das eine Funktion zurückgibt, die ein Date
basierend auf den locales
und options
in der DateTimeFormat
Instanz DateTimeFormat
.
Die Funktion verwendet ein Date
Objekt oder undefined
als optionales Argument und gibt eine string
im angeforderten Datumsformat zurück.
Hinweis: Wenn das Argument nicht undefined
oder nicht angegeben ist, wird der Wert von Date.now()
im angeforderten Datumsformat zurückgegeben.
Hier ist die Syntax:
new Intl.DateTimeFormat (). format () // gibt das aktuelle Datum im Laufzeitformat zurück
Und jetzt lassen Sie uns eine einfache Datumsformatierung kodieren.
Lassen Sie uns die Sprache ändern und sehen Sie sich die Ausgabe an.
Jetzt ist es an der Zeit, nach Optionen zu suchen.
Die toLocaleDateString- Methode
Anstatt einen Formatierer wie in den obigen Beispielen zu verwenden, können Sie Date.prototype.toLocaleString
auf die gleiche Weise mit den locales
und options
Argumenten verwenden, sie sind ähnlich, aber es wird empfohlen, das DateTimeFormat
Objekt zu verwenden, wenn zu viele Daten behandelt werden in Ihrer Bewerbung.
var mydate = neues Datum ('2015/04/22'); var options = {Wochentag: "kurz", Jahr: "numerisch", Monat: "lang", Tag: "numerisch"}; console.log (mydate.toLocaleDateString ('en-GB', Optionen)); // gibt "Mi, 22. April 2015" zurück
Testen Sie, ob die Ländereinstellungen unterstützt werden
Um nach den unterstützten locales
DateTimeFormat
, können wir die Methode supportedLocalesOf
des DateTimeFormat
Objekts verwenden. Es wird ein Array aller unterstützenden Ländereinstellungen oder ein leeres Array zurückgegeben, wenn keine Ländereinstellungen unterstützt werden.
Fügen Sie zum Testen ein Dummy-Gebietsschema "blah" in die Liste der zu überprüfenden Gebietsschemas ein.
console.log (Intl.DateTimeFormat.supportedLocalesOf (["zh", "blah", "fa-pes"])); // gibt Array ["zh", "fa-pes"] zurück
Browserunterstützung
Ende April 2015 unterstützen die wichtigsten Browser die Internationalisierungs-API.

- ECMA International: ECMAScript Internationalisierungs-API-Spezifikation
- IANA : Sprach-Sub-Tag-Registrierung
- Norbert's Corner: Die ECMAScript-Internationalisierungs-API

Leicht Text mit Textillate.js zu animieren
In unserer vorheriger Beitrag, wir haben euch Animate.css vorgestellt, eine tolle CSS3-Bibliothek, die die Erstellung von CSS3-Animationen vereinfacht. In diesem Beitrag stellen wir Ihnen ein jQuery-Plugin vor, das mit Animate.css erstellt wurde und Text mit der Bezeichnung " Textillate.js" animieren kann

Panda 5 ist der Smart News Reader Designer und Entwickler werden lieben
Old-School-RSS-Leser sind immer noch beliebt, weil sie Menschen an einem Ort die Dinge, die sie mögen, kuratieren lassen.Panda Reader hat die gleiche Idee, geht aber mit benutzerdefinierten RSS-Feeds für beliebte Design-, Entwickler- und Tech-Blogs einen Schritt weiter. Es ist vollständig anpassbar, sodass Sie festlegen können, welche Feeds in Ihrem Dashboard angezeigt werden und wie viel Speicherplatz sie belegen.Auß