Share
Internationalisierung - etwas, von dem Entwickler ständig reden hören, aber selten in der Praxis von Anwendern genutzt werden - ist mit der neuen ECMAScript Internationalization API ein Tritt in die Hose. Der neue Intl-Namespace wird derzeit von 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 Ihren Zahlen, Datumsangaben und Sortierungen Internationalisierung hinzufügen können. In diesem Artikel werde ich die wichtigsten Funktionen von Intl demonstrieren und Sie auf den Weg bringen, Unterstützung für Milliarden von Menschen im Internet zu finden, die außerhalb Ihres eigenen Landes leben!
Der Intl-Namespace deckt drei Hauptfunktionsbereiche ab:
In jedem dieser Bereiche befinden sich verschiedene Optionen zum Steuern der für die Formatierung verwendeten Gebietsschemas sowie der Formatierungsoptionen. Zum Beispiel unterstützt das Zahlenformatierungsprogramm die Handhabung von Währungen. Der Datumsformatierer hat Optionen, welche Teile des Datums angezeigt werden sollen.
Schauen wir uns einige Beispiele an.
Unsere erste Anwendung ist ein einfacher Datenreporter. Es verwendet AJAX, um einen Datensatz mit Datumsangaben und Zahlen abzurufen. Zuerst das HTML:
Listing 1: test1.html:
Aktuelle Statistiken
| Datum | Besuche |
|---|
Notieren Sie sich die leere Tabelle. Dort werden wir unsere Daten ablegen. Schauen wir uns jetzt das JavaScript an.
Listing 2: app1.js:
Accentsconagua
$ (document) .ready (function () // Holen Sie sich die Tabelle dom $ table = $ ("# stats tbody"); // Holen Sie sich jetzt unsere Daten aus der API, die fake btw $ .getJSON ("stats .json "). done (Funktion (en) // iteriere über Statistiken und füge Tabelle für hinzu (var i = 0; i < s.length; i++) $table.append(""+s[i].date+""+s[i].views+""); ).fail(function(e) console.log("we failed"); console.dir(e); ); ); Alles, was der Code hier macht, ist, einen AJAX-Aufruf an eine Datei auszuführen und das Ergebnis den Daten zu übergeben. Die Datendatei, stats.json, ist einfach ein Array von zehn hartcodierten Werten. Hier ist ein Teil der Datei:
["Datum": "01.04.2013", "Ansichten": 938213, "Datum": "02.04.2013", "Ansichten": 238213,
Wie Sie sehen können, werden die Daten als formatiert Monat / Datum / Jahr und die Zahlen werden übergeben, wie es ist. Dies macht akzeptabel:
Beachten Sie jedoch, dass die Zahlen ohne Formatierung etwas schwer zu lesen sind. Beginnen wir damit, den Zahlen etwas zu formatieren.
Die folgenden Modifikationen sind in zu sehen app2.js und getestet mit test2.html. Zuerst werde ich meinen Code ändern, um eine neue Funktion aufzurufen, Zahlenformat:
$ table.append ("" + s [i] .date + "" + numberFormat (s [i] .views) + "")); Und hier ist diese Funktion:
function numberFormat (n) // Das Formatierungsprogramm einmal zwischenspeichern. if (window.Intl &&! window.numberFormatter) window.numberFormatter = window.Intl.NumberFormat (); if (window.numberFormatter) return window.numberFormatter.format (n); else return n;
Die Funktion beginnt mit der Prüfung, ob Intl existiert als Teil des Fenster Objekt. Wenn dies der Fall ist, prüfen wir, ob wir das Formatierungsprogramm zuvor erstellt haben. Das Intl object erstellt ein Formatierungsobjekt, das Sie wiederverwenden können. Da wir eine Reihe von Zahlen formatieren, möchten Sie es nur einmal erstellen. Genau das tun wir, sobald wir sehen, dass wir auch brauchen. Wir machen uns im Moment keine Gedanken, um es einfach zu halten. Schließlich, wenn es keine Unterstützung für gab Intl Überhaupt geben wir die Nummer einfach so zurück. Das Ergebnis ist eine deutliche Verbesserung mit minimalem Aufwand:
Cool! Wie testen wir also andere Sprachen? Sie könnten versucht sein, Ihre Browsereinstellungen zu überprüfen. Alle Browser bevorzugen die Sprache, ändern jedoch die Sprache im Browser ist nicht genug. Es ändern tut Auswirkungen auf das Verhalten des Browsers.
Wenn Sie Ihre Entwicklungstools öffnen und Netzwerkanfragen betrachten, können Sie sehen, dass der Header "Akzeptiere Lanage"ändert sich je nach Ihren Einstellungen. Wenn Sie beispielsweise Französisch hinzufügen (ich nehme an, dass Sie kein französischer Muttersprachler sind), sehen Sie"fr"wurde diesem Header hinzugefügt. Dies wirkt sich jedoch nicht aus Intl. Stattdessen müssen Sie die Sprache Ihres Betriebssystems ändern und den Browser neu starten. Das ist nicht so unheimlich wie es klingt. Als ich testete, machte ich mir Sorgen, 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 wechselte schnell zurück. Mit den Intl-Formatierungsfunktionen können Sie das aktuelle Gebietsschema überschreiben und stattdessen eines übergeben.
Ich habe die Anwendung geändert, damit der Endbenutzer über ein Dropdown-Menü eine Sprache festlegen kann. Hier ist die Änderung am HTML. (Diese Änderung kann in gefunden werden test3.html)
Die Sprachen, die ich ausgewählt habe, waren ziemlich willkürlich. Weiter - Ich habe meinen Anwendungscode aktualisiert, um Änderungen an diesem Dropdown-Menü zu überwachen und das gewünschte Gebietsschema beim Formatieren zu überprüfen.
Listing 3: app3.js:
function numberFormat (n) if (window.Intl) var lang = $ ("# langDropdown"). val (); if (lang === "") lang = navigator.language; var formatter = new window.Intl.NumberFormat (lang); return formatter.format (n); else return n; function getStats () $ .getJSON ("stats.json"). done (Funktion (en) // iteriere über stats und füge zur Tabelle hinzu (var i = 0; i < s.length; i++) $table.append(""+s[i].date+""+numberFormat(s[i].views)+""); ).fail(function(e) console.log("we failed"); console.dir(e); ); $(document).ready(function() //get the table dom $table = $("#stats tbody"); //notice changes to drop down $("#langDropdown").on("change", function(e) $table.empty(); getStats(); ); getStats(); ); 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 und die Funktion geleert getStats es läuft. Diese neue Funktion abstrahiert einfach den zuvor verwendeten AJAX-Code. Die wirkliche Veränderung ist jetzt in Zahlenformat. Ich überprüfe die ausgewählte Sprache und wenn eine von ihnen ausgewählt wurde, übergeben wir diese als Ländereinstellung an die Zahlenformat Konstrukteur. Beachten Sie, dass wir, wenn etwas nicht ausgewählt wurde, standardmäßig verwenden navigator.language. Dies gibt uns jetzt die Möglichkeit, verschiedene Gebietsschemas schnell zu testen und zu sehen, wie sie Zahlen rendern.
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 einen Aufruf zu einer neuen Funktion hinzu, Datumsformat.
$ table.append ("" + dateFormat (s [i] .date) + "" + numberFormat (s [i] .views) + "")); Und hier ist es Datumsformat (Den Code finden Sie in app4.js, welche von verwendet wird test4.html):
function dateFormat (n) // Wird für die Datumsanzeige verwendet. var opts = ; opts.day = "numerisch"; opts.weekday = "long"; opts.year = "numerisch"; opts.month = "long"; if (window.Intl) var lang = $ ("# langDropdown"). val (); if (lang === "") lang = navigator.language; var formatter = new window.Intl.DateTimeFormat (lang, opts); n = neues Datum (n); return formatter.format (n); else return n; Dies ist der Formatierung von Zahlen sehr ähnlich, mit der Ausnahme, dass wir beim Erstellen des Formatierers explizit einige Optionen übergeben. Die Optionen geben an, welche Felder im Datum sichtbar sind und wie sie aussehen. Jeder Teil eines Datums kann angezeigt werden oder nicht, und jeder hat verschiedene Optionen. Die Optionen umfassen:
Eine vollständige Liste der möglichen Werte finden Sie in der MDN-Dokumentation für DateTimeFormat, Monate können beispielsweise als Zahl oder in verschiedenen Textformen angezeigt werden. Also, was schafft das? Hier ist die englische Version:
Und hier ist es auf Französisch:
Sie fragen sich vielleicht - was deckt den Ort 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 kombinieren. Wenn Sie jedoch einen Formatierer verwenden, wird das Layout der Felder von der internen Logik gesteuert. Wenn Sie beispielsweise den Tag des Monats ausschalten, erhalten Sie Folgendes: April 2013 Montag. Warum? Ehrlich gesagt habe ich keine Ahnung.
Beachten Sie schließlich, dass Sie dem Formatierungsprogramm einen Datumswert und keine Zeichenfolge übergeben müssen. Sie können sehen, wo ich den Datumskonstruktor im Formatierungsprogramm verwende, um mein auf Zeichenfolgen basierendes Datum zu analysieren. Dies ist - etwas locker - also bedenken Sie dies, wenn Sie diese Funktion verwenden.
Die Währungsformatierung ist kein separates Objekt, sondern eine optionale Verwendung des Zahlenformatierers. Für die nächste Demo haben wir eine neue Datendatei erstellt, stats2.json, und fügte eine Spalte "Umsatz" zu unseren Daten hinzu. Hier ist ein Beispiel:
"date": "4/1/2013", "views": 938213, "sales": 3890.21, "date": "4/2/2013", "views": 238213, "sales": 9890.10
Die Spalte wurde dem HTML hinzugefügt (test5.html), hinzugefügt im JavaScript über die Datenzeilen (siehe app5.js) und an eine neue Funktion übergeben CurrencyFormat. Schauen wir uns das an.
Funktion currencyFormat (n) var opts = ; opts.style = "Währung"; opts.currency = "USD"; if (window.Intl) var lang = $ ("# langDropdown"). val (); if (lang === "") lang = navigator.language; var formatter = new window.Intl.NumberFormat (lang, opts); return formatter.format (n); else return n; Um Zahlen als Währungen anzuzeigen, sind zwei optionale Werte erforderlich. Zuerst eine Art "Währung" und dann den Währungstyp. Es gibt auch andere Optionen (z. B. wie der Name der Währung angezeigt wird). Hier kommt der Teil, der Sie vielleicht etwas stürzen kann. Sie Muss Geben Sie den Währungstyp an.
Sie denken vielleicht - wie 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/de/home/tables/table-a1.html) und theoretisch könnten Sie ihre XML-Daten analysieren, dies möchten Sie jedoch nicht. Der Grund dafür ist ziemlich offensichtlich, aber ich kann ehrlich sagen, dass ich anfangs auch vergessen habe. Sie möchten nicht einfach eine bestimmte Zahl in einer für ein Gebietsschema spezifischen Währung erneut anzeigen. Warum? Weil zehn Dollar Amerikaner sicher sind nicht das gleiche wie zehn Dollar in Pesos. Das ist ziemlich offensichtlich und hoffentlich bin ich die einzige Person, die das vergessen hat.
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 Nummer steht.
Als letztes Beispiel betrachten wir das Collator Konstrukteur. Mit Collators können Sie die Textsortierung durchführen. Während einige Sprachen einem einfachen A-zu-Z-Bestellsystem folgen, haben andere Sprachen andere Regeln. Noch interessanter wird es natürlich, wenn Sie Akzente setzen. Kannst du sicher sagen, ob ä nach einem kommt? Ich weiß ich kann nicht. Der Collator-Konstruktor verwendet eine Reihe von Argumenten, um die genaue Sortierreihenfolge festzulegen, der Standardwert wird jedoch wahrscheinlich für Sie gut funktionieren.
Für dieses Beispiel haben wir eine komplett neue Demo erstellt, die jedoch den vorherigen Beispielen ähnelt. Im test6.html, Sie können eine neue Tabelle sehen, z Studenten. Unser neuer Code lädt ein JSON-Paket von Studenten und sortiert sie anschließend auf dem Client. Bei den JSON-Daten handelt es sich lediglich um ein Array von Namen, so dass ich einen Ausschnitt überspringe. Schauen wir uns die Anwendungslogik an.
Listing 4: app6.js:
Funktionssortierer (x, y) if (window.Intl) var lang = $ ("# langDropdown"). val (); if (lang === "") lang = navigator.language; return window.Intl.Collator (lang) .compare (x, y); else return x.localeCompare (y); function getStudents () $ .getJSON ("students.json"). done (Funktion (en) // Durchlaufe Statistiken und füge Tabelle s.sort (Sortierer) hinzu; < s.length; i++) $table.append(""+s[i]+""); ).fail(function(e) console.log("we failed"); console.dir(e); ); $(document).ready(function() //get the table dom $table = $("#students tbody"); //notice changes to drop down $("#langDropdown").on("change", function(e) $table.empty(); getStudents(); ); getStudents(); ); Wie gesagt, dieser Code ist den vorherigen Beispielen ziemlich ähnlich, konzentrieren Sie sich also darauf getStudents zuerst. Die entscheidende Linie hier ist: an sort (sorter). Wir verwenden die integrierte Funktion für Arrays, um über eine benutzerdefinierte Funktion zu sortieren. Diese Funktion wird zwei zu Vergleichszwecken übergeben und muss zurückgegeben werden -1, 0, oder 1 um darzustellen, wie die beiden Elemente sortiert werden sollen. Nun sehen wir uns den Sortierer an.
Wenn wir eine haben Intl Objekt erstellen wir ein neues Collator (und wiederum erlauben wir Ihnen, ein Gebietsschema zu übergeben) und dann führen wir das aus vergleichen Sie Funktion. Das ist es. Wie gesagt, es gibt Optionen zum Ändern der Sortierreihenfolge, aber wir können die Standardeinstellungen verwenden. Der Rückfall ist localeCompare, Dies wird auch versuchen, die länderspezifische Formatierung zu verwenden, hat jedoch (in dieser Form) etwas bessere Unterstützung. Wir könnten auch nach dieser Unterstützung suchen und noch einen Fallback hinzufügen Ja wirklich gute Unterstützung, aber ich lasse das für Sie als Übung.
Wir haben auch das Frontend geändert, um Schwedisch als Sprache zu verwenden. Ich tat dies, weil die hervorragende MDN-Dokumentation zeigte, dass dies eine gute Möglichkeit war, 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. (Sorry, mir fällt kein Name ein, der mit ä begann.)
Alles in allem die Intl Klasse bietet einige sehr einfache Möglichkeiten zum Hinzufügen länderspezifischer Formatierungen zu Ihrem Code. Dies ist sicherlich etwas, das Sie jetzt finden können, wahrscheinlich in ein paar 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 eine Schande, aber hoffentlich wird es bald hinzugefügt.
Vielen Dank an das hervorragende Mozilla Developer Network für die großartige Intl-Dokumentation.
