de.hideout-lastation.com
Paradies Für Designer Und Entwickler


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:
EigentumBeschreibungMögliche Werte
TagTag des Monats"2-stellig", "numerisch"
EpocheEra das Datum fällt in, Bsp .: BC"Eng", "kurz", "lang"
formatMatcherDer für die Formatanpassung verwendete Algorithmus"Basis", "beste Passform" [ Standard ]
StundeStellt Stunden in der Zeit dar"2-stellig", "numerisch"
Stunde12Zeigt das 12-Stunden-Format ( true ) oder das 24-Stunden-Format ( false ) antrue, false
localeMatcherDer Algorithmus, der für die Ländereinstellung verwendet wird"Nachschlagen", "beste Passform" [ Standard ]
MinuteMinuten in der Zeit"2-stellig", "numerisch"
MonatMonat in einem Jahr"2-stellig", "numerisch", "schmal", "kurz", "lang"
zweiteSekunden in der Zeit"2-stellig", "numerisch"
ZeitzoneZeitzone für die Anwendung"UTC", Standard ist die Laufzeit-Zeitzone
timeZoneNameZeitzone des Datums"kurz lang"
WochentagTag in der Woche"Eng", "kurz", "lang"
JahrJahr 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

20 clevere und kreative Bus-Anzeigen, die Sie zweimal aussehen lassen

20 clevere und kreative Bus-Anzeigen, die Sie zweimal aussehen lassen

Werbetafeln sind statische Werbemöglichkeiten und während Ammer und Plakate ein bisschen mehr Flexibilität haben, sind sie normalerweise zu klein und stecken fest, um diese Werbewirkung zu erzielen. Busse haben jedoch ein enormes Potenzial - Sie können sie auf der Straße sehen und sie hat bewegliche Teile (Türen), die für verschiedene Marketing-Taktiken verwendet werden können, um die Geschichte Ihrer Produkte zu erzählen.Aber war

(Tech- und Design-Tipps)

Generieren Sie Social Meta Tags einfach mit dieser App

Generieren Sie Social Meta Tags einfach mit dieser App

Die größten Social-Media-Sites haben die Welt praktisch erobert, Facebook treibt derzeit 2 Milliarden Nutzer weltweit an.Einer ihrer vielen Fortschritte in der Technologie ist das Open Graph- oder OG-Protokoll . Diese OG-Tags sind in anderen sozialen Netzwerken wie Pinterest und LinkedIn zur Norm geworden, daher kann es sehr vorteilhaft sein, sie auf Ihrer Website zu haben.U

(Tech- und Design-Tipps)