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

The Dead Simple Guide zum grundlegenden Logo Design

The Dead Simple Guide zum grundlegenden Logo Design

Wenn Sie an Logo denken, was Ihnen in den Sinn kommt? Ein golden gewölbter M, ein Haufen Linien und Kreise oder vielleicht nur eine süße kleine Form? Warum muss "Logo Design" dann eine Aufgabe sein, die nur auf einen hochprofessionellen Computerfreak beschränkt ist, der über alle möglichen Programme verfügt? Um eh

(Tech- und Design-Tipps)

15 sprachgesteuerte Geräte

15 sprachgesteuerte Geräte

Da moderne Technologien intuitiver werden, erstellen Hersteller Geräte, die durch Berührung, bestimmte Gesten und sogar Ihre eigene Stimme aktiviert und gesteuert werden können . Heute haben wir uns dazu entschieden, Ihnen eine Liste mit innovativen technischen Gadgets zur Verfügung zu stellen, die durch den Klang Ihrer Stimme aktiviert werden können.Dies

(Tech- und Design-Tipps)