de.hideout-lastation.com
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.
Verweise - ECMA International: ECMAScript Internationalisierungs-API-Spezifikation
- IANA : Sprach-Sub-Tag-Registrierung
- Norbert's Corner: Die ECMAScript-Internationalisierungs-API
Spectre.css - Leichtes Flexbox-basiertes Responsive CSS Framework
Wenn Sie in Flexbox-Layouts eintauchen möchten, dann ist jetzt die beste Zeit, um anzufangen. Moderne Browser akzeptieren endlich Flexbox-Eigenschaften und mehr Entwickler machen sich daran.Aber warum sollten Sie bei Null anfangen, wenn Sie auf wiederverwendbaren Code aufbauen können? Spectre.css ist eines der besten Frameworks, um mit der Verwendung von Flexbox zu beginnen.D
So erstellen Sie Google Mail Die Standard-E-Mail-App
Wenn es sich bei Google Mail um Ihren Google-E-Mail-Dienst handelt wie bei über einer Milliarde anderer Google Mail-Nutzer, müssen Sie sicherstellen, dass Google Mail alle Ihre E-Mail-Anforderungen erfüllt. Es kann jedoch sehr ärgerlich sein, auf einen Mailto-Link in Ihrem Browser zu klicken, nur um den OS-E-Mail-Client zu sehen, der Sie auffordert, ihn einzurichten.Glü
