Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Arbeiten mit Intl

by
Read Time:11 minsLanguages:

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Internationalisierung - etwas, über das Entwickler ständig sprechen, das sie jedoch in der Praxis nur selten sehen - wird mit der neuen ECMAScript Internationalization API in die Hose gemacht. Der neue Intl-Namespace wird derzeit in Chrome 24, Chrome für Android, Firefox 29, IE 11 und Opera 15 unterstützt (leider keine Safari-Unterstützung) und bietet eine Reihe von Funktionen, mit denen Sie Ihre Nummern, Daten und Sortierungen internationalisieren können. In diesem Artikel werde ich die Hauptfunktionen von Intl demonstrieren und Sie auf den Weg bringen, Unterstützung für Milliarden von Menschen im Internet zu übernehmen, die außerhalb Ihres eigenen Landes leben!

Kernfunktionen

Der Intl-Namespace deckt drei Hauptfunktionsbereiche ab:

  • Zahlen formatieren
  • Formatieren von Daten
  • Zeichenfolgen sortieren

In jedem dieser Optionen gibt es verschiedene Optionen zum Steuern sowohl der für die Formatierung verwendeten Gebietsschemas als auch der Formatierungsoptionen. Der Zahlenformatierer enthält beispielsweise Unterstützung für den Umgang mit Währungen. Der Datumsformatierer verfügt über Optionen für die anzuzeigenden Teile des Datums.

Schauen wir uns einige Beispiele an.

Unsere Bewerbung

Unsere erste Anwendung ist ein einfacher Datenreporter. Es verwendet AJAX, um einen Datensatz abzurufen, der Datums- und Zahlenangaben enthält. Erstens das HTML:

Listing 1: test1.html:

Notieren Sie sich die leere Tabelle. Dort werden wir unsere Daten ablegen. Schauen wir uns nun das JavaScript an.

Listing 2: app1.js:

Der Code führt hier lediglich einen AJAX-Aufruf einer Datei durch und rendert das Ergebnis in den Daten. Die Datendatei stats.json ist einfach ein Array von zehn fest codierten Werten. Hier ist ein Teil der Datei:

Wie Sie sehen können, werden die Daten als month/date/year formatiert und die Zahlen werden unverändert übergeben. Dies macht akzeptabel:

Beachten Sie jedoch, dass die Zahlen ohne Formatierung etwas schwer zu lesen sind. Beginnen wir mit dem Hinzufügen von Formatierungen zu den Zahlen.

Zahlenformatierung hinzufügen

Die folgenden Änderungen können in app2.js angezeigt und mit test2.html getestet werden. Zuerst ändere ich meinen Code, um eine neue Funktion aufzurufen, numberFormat:

Und hier ist diese Funktion:

Die Funktion beginnt mit der Überprüfung, ob Intl als Teil des window-Objekts vorhanden ist. Wenn dies der Fall ist, überprüfen wir, ob wir den Formatierer bereits erstellt haben. Das Intl-Objekt erstellt ein Formatierungsobjekt, das Sie wiederverwenden können. Da wir eine Reihe von Zahlen formatieren, möchten wir es nur einmal erstellen. Genau das tun wir, sobald wir sehen, dass wir es auch brauchen. Wir beschäftigen uns vorerst nicht mit Optionen, nur um es einfach zu halten. Wenn Intl überhaupt nicht unterstützt wurde, geben wir die Nummer einfach so zurück, wie sie ist. Das Ergebnis ist eine signifikante Verbesserung bei minimalem Arbeitsaufwand:

Cool! Wie testen wir andere Sprachen? Sie könnten versucht sein, die Einstellungen Ihres Browsers zu überprüfen. Alle Browser bevorzugen die Sprache, aber leider reicht es nicht aus, die Sprache im Browser zu ändern. Das Ändern wirkt sich auf das Verhalten des Browsers aus.

Wenn Sie Ihre Entwicklungstools öffnen und Netzwerkanforderungen anzeigen, können Sie feststellen, dass sich ein Header mit dem Namen "Accept-Lanage" je nach Ihren Einstellungen ändert. Wenn Sie beispielsweise Französisch hinzufügen (ich gehe davon aus, dass Sie kein französischer Muttersprachler sind), wird diesem Header "fr" hinzugefügt. Dies hat jedoch keine Auswirkungen auf Intl. Stattdessen müssen Sie die Sprache Ihres Betriebssystems ändern und den Browser neu starten. Das ist nicht so beängstigend, wie es sich anhört. Beim Testen hatte ich Angst, dass sich mein gesamtes Betriebssystem sofort ändern würde. In meinen Tests konnte ich jedoch die Sprache ändern, meinen Browser neu starten und die Änderung sehen. Ich zog mich schnell zurück. Mit den Intl-Formatierungsfunktionen können Sie das aktuelle Gebietsschema überschreiben und stattdessen eines übergeben.

Ich habe die Anwendung so geändert, dass der Endbenutzer eine Sprache über ein Dropdown-Menü angeben kann. Hier ist die Änderung, die am HTML vorgenommen wurde. (Diese Änderung kann in test3.html gefunden werden)

Die Sprachen, die ich ausgewählt habe, waren ziemlich willkürlich. Weiter - Ich habe meinen Anwendungscode aktualisiert, um Änderungen an dieser Dropdown-Liste anzuhören und das gewünschte Gebietsschema bei der Formatierung zu überprüfen.

Listing 3: app3.js:

Beginnen Sie unten - beachten Sie, dass ich einen einfachen Ereignishandler für Änderungen an der Dropdown-Liste hinzugefügt habe. Wenn eine Änderung erkannt wird, wird die Tabelle geleert und die Funktion getStats ausgeführt. Diese neue Funktion abstrahiert einfach den zuvor verwendeten AJAX-Code. Die eigentliche Änderung ist jetzt in numberFormat. Ich überprüfe die ausgewählte Sprache und wenn eine davon ausgewählt wurde, übergeben wir diese als Gebietsschema an den NumberFormat-Konstruktor. Beachten Sie, dass wir standardmäßig navigator.language verwenden, wenn etwas nicht ausgewählt wurde. Dies gibt uns jetzt die Möglichkeit, verschiedene Gebietsschemas schnell zu testen und zu sehen, wie sie Zahlen rendern.

Datumsformatierung hinzufügen

Jetzt ist der perfekte Zeitpunkt, um sich um die andere Datenspalte zu kümmern - die Zahlen. Ich folgte dem gleichen Stil wie zuvor und fügte einer neuen Funktion, dateFormat, einen Aufruf hinzu.

Und hier ist dateFormat (Sie finden den Code in app4.js, der von test4.html verwendet wird):

Dies ist der Zahlenformatierung sehr ähnlich, außer dass wir diesmal beim Erstellen des Formatierers explizit einige Optionen übergeben. Die Optionen geben sowohl an, welche Felder im Datum sichtbar sind, als auch wie sie aussehen. Jeder Teil eines Datums kann angezeigt werden oder nicht, und jeder hat unterschiedliche Optionen. Die Optionen umfassen:

  • Wochentag
  • Epoche
  • Jahr
  • Monat
  • Tag
  • Stunde
  • Minute
  • zweite
  • timeZoneName

Eine vollständige Liste der Werte, die Sie verwenden können, finden Sie in der MDN-Dokumentation für DateTimeFormat. Als Beispiel können Monate jedoch als Zahl oder in verschiedenen Textformen angezeigt werden. Was schafft das? Hier ist die englische Version:

Und hier ist es auf Französisch:

Sie fragen sich vielleicht - was deckt den Standort jedes Feldes ab? Soweit ich das beurteilen kann, haben Sie keine Kontrolle darüber. Sie können natürlich mehrere Formatierer erstellen und diese dann miteinander kombinieren. Bei Verwendung eines Formatierers wird das Layout der Felder jedoch von der internen Logik gesteuert. Wenn Sie beispielsweise den Tag des Monats ausschalten, erhalten Sie Folgendes: Montag, April 2013. Warum? Ehrlich gesagt habe ich keine Ahnung.

Beachten Sie schließlich, dass Sie dem Formatierer einen Datumswert und keine Zeichenfolge übergeben müssen. Sie können sehen, wo ich den Datumskonstruktor im Formatierer verwende, um mein stringbasiertes Datum zu analysieren. Dies ist - etwas locker - also denken Sie daran, wenn Sie diese Funktionalität verwenden.

Zeigen Sie mir das Geld

Die Währungsformatierung ist kein separates Objekt, sondern eine optionale Verwendung des Zahlenformatierers. Für die nächste Demo haben wir eine neue Datendatei, stats2.json, erstellt und unseren Daten eine Spalte "sales" hinzugefügt. Hier ist ein Beispiel:

Die Spalte wurde dem HTML-Code(test5.html) hinzugefügt, innerhalb des JavaScript hinzugefügt, das über die Datenzeilen iteriert (sehen Sie app5.js), und an eine neue Funktion namens currencyFormat übergeben. Schauen wir uns das an.

Das Anzeigen von Zahlen als Währungen erfordert zwei optionale Werte. Zuerst ein Stil von "Währung" und dann der Währungstyp. Es gibt auch andere Optionen (wie das Anzeigen des Namens der Währung). Hier kommt der Teil, der Sie ein bisschen stolpern kann. Sie müssen den Währungstyp angeben.

Sie denken vielleicht - wie zum Teufel finde ich den Währungstyp für alle möglichen Werte heraus? Die möglichen Werte basieren auf einer Spezifikation (http://www.currency-iso.org/en/home/tables/table-a1.html) und theoretisch könnten Sie deren XML analysieren, möchten dies aber nicht Das. Der Grund dafür ist ziemlich offensichtlich, aber ich kann ehrlich sagen, dass ich es anfangs auch vergessen habe. Sie möchten nicht nur eine bestimmte Nummer in einer länderspezifischen Währung erneut anzeigen. Warum? Denn zehn Dollar Amerikaner sind sicherlich nicht dasselbe wie zehn Dollar in Pesos. Das ist ziemlich offensichtlich und hoffentlich bin ich die einzige Person, die das vergisst.

Mit dem obigen Code können wir die folgenden Ergebnisse im französischen Gebietsschema sehen. Beachten Sie, wie die Zahlen für das Gebietsschema richtig formatiert sind und das Währungssymbol hinter der Zahl steht.

Sortieren mit Collator

In unserem letzten Beispiel sehen wir uns den Collator-Konstruktor an. Mit Collatoren können Sie die Textsortierung durchführen. Während einige Sprachen einem einfachen Bestellsystem von A bis Z folgen, gelten für andere Sprachen andere Regeln. Und natürlich werden die Dinge noch interessanter, wenn Sie Akzente setzen. Können Sie mit Sicherheit sagen, ob ä nach a kommt? Ich weiß, ich kann nicht. Der Collator-Konstruktor verwendet eine Reihe von Argumenten, um genau anzugeben, wie sortiert werden soll. Die Standardeinstellung funktioniert jedoch wahrscheinlich gut für Sie.

Für dieses Beispiel haben wir eine völlig neue Demo erstellt, die jedoch den vorherigen Beispielen ähnelt. In test6.html sehen Sie eine neue Tabelle für Students. Unser neuer Code lädt ein JSON-Paket von Schülern und sortiert sie dann auf dem Client. Die JSON-Daten sind einfach ein Array von Namen, daher überspringe ich die Anzeige eines Auszugs. Schauen wir uns die Anwendungslogik an.

Listing 4: app6.js:

Wie gesagt, dieser Code ist den vorherigen Beispielen ziemlich ähnlich. Konzentrieren Sie sich also zuerst auf getStudents. Die entscheidende Linie hier ist: s.sort(sorter). Wir verwenden die integrierte Funktion für Arrays, um über eine benutzerdefinierte Funktion zu sortieren. Diese Funktion erhält zwei zu vergleichende Dinge und muss -1, 0 oder 1 zurückgeben, um darzustellen, wie die beiden Elemente sortiert werden sollen. Nun schauen wir uns den Sortierer an.

Wenn wir ein Intl-Objekt haben, erstellen wir einen neuen Collator (und erlauben Ihnen erneut, ein Gebietsschema zu übergeben) und führen dann die compare funktion aus. Das ist es. Wie gesagt, es gibt Optionen zum Ändern der Sortierung, aber wir können die Standardeinstellungen verwenden. Der Fallback ist localeCompare, das ebenfalls versucht, die länderspezifische Formatierung zu verwenden, jedoch (in dieser Form) eine etwas bessere Unterstützung bietet. Wir könnten auch nach dieser Unterstützung suchen und einen weiteren Fallback für wirklich gute Unterstützung hinzufügen, aber das überlasse ich Ihnen als Übung.

Wir haben auch das Frontend so geändert, dass Schwedisch als Sprache verwendet wird. Ich habe dies getan, weil die ausgezeichnete MDN-Dokumentation gezeigt hat, dass dies eine gute Möglichkeit ist, die Sortierung in Aktion zu sehen. Hier ist die englische Art unserer Schülernamen:

Und hier ist es auf Schwedisch:

Beachten Sie, wie ätest anders sortiert ist. (Entschuldigung, ich konnte mir keinen Namen vorstellen, der mit ä begann.)

Einpacken

Alles in allem bietet die Intl-Klasse einige sehr einfache Möglichkeiten, um Ihrem Code eine länderspezifische Formatierung hinzuzufügen. Dies ist sicherlich etwas, das Sie jetzt finden können, wahrscheinlich in einigen tausend verschiedenen JavaScript-Bibliotheken, aber es ist großartig zu sehen, dass die Browserhersteller die Unterstützung direkt in der Sprache selbst hinzufügen. Der Mangel an iOS-Unterstützung ist ein Mist, aber hoffentlich wird er bald hinzugefügt.

Vielen Dank an das hervorragende Mozilla Developer Network für die großartige Intl Dokumentation.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.