Erste Schritte mit der Internationalisierung in JavaScript

Durch die Anpassung unserer Apps an verschiedene Sprachen und Länder bieten wir eine bessere Benutzererfahrung. Für Benutzer ist es einfacher, mit bekannten Notationen für Datumsangaben, Währungen und Zahlen umzugehen.

Bei der Internationalisierung (i18n) wird Ihrer App Unterstützung für verschiedene Sprachen und Länder hinzugefügt.Die Zahl 18 steht für die Anzahl der Buchstaben zwischen dem ersten 'i' und dem letzten 'n' .

Beispiele für die Internationalisierung sind die Unicode-Unterstützung, die Anpassung der Benutzeroberfläche für verschiedene Alphabete oder die Arraysortierung nicht englischer Zeichenfolgen.

JavaScript implementiert die Internationalisierungs-API-Spezifikation und definiert das integrierte Intl-Objekt.

Und was es so nützlich macht, ist, dass es eine hervorragende browserübergreifende Kompatibilität und Node.js-Unterstützung bietet:

Lass uns anfangen!

Das IntlObjekt bietet Zugriff auf mehrere Konstruktoren, z.

  • Intl.DateTimeFormat - sprachabhängige Datums- und Uhrzeitformatierung .
  • Intl.NumberFormat - sprachabhängige Zahlenformatierung.
  • Intl.PluralRules - pluralsensitive Formatierung und pluralistische Sprachregeln.
  • Intl.Collator - sprachempfindlicher Zeichenfolgenvergleich.

Das Erstellen eines dieser Objekte erfolgt nach einem einfachen Muster:

const formatter = new Intl.ctor(locales, options);

Zum Beispiel das Gebietsschema „ de-AT“ : Deutsche Sprache, wie sie in Österreich verwendet wird:

const dateFormatterAT = new Intl.DateTimeFormat("de-AT");

Dann rufen wir die format () -Methode mit einem bereitgestellten Date- Objekt auf:

const date = new Date("2018-11-25");const format = dateFormatterAT.format(date); // "25.11.2018"

Es enthält nur Sprach- und Ländercodes. Bald werden wir umfassendere Beispiele sehen. Hier finden Sie weitere Beispiele für Gebietsschemas.

Wir können navigator.language verwenden - die bevorzugte Sprache für den Benutzer, die wir als Gebietsschema verwenden:

Anstatt eine Formatmethode direkt aufzurufen , können wir sie hier als Funktion zuweisen. Es ist großartig, denn sobald wir eine spezielle Formatfunktion erstellt haben, können wir sie mehrmals verwenden.

Nur ein paar Codezeilen und Sie haben ein lokalisiertes Datum!

Als nächstes werden wir tiefer eintauchen und mehr über Orte erfahren. Wenn Sie nicht dazu bereit sind und nur coole Demos wie diese im Bild unten sehen möchten, gehen Sie zum Beispielabschnitt unten!

Tiefer tauchen

Nun, dies reicht aus, um eine Vorstellung davon zu bekommen, wie es funktioniert, aber die tatsächlichen Anwendungsfälle könnten viel komplizierter werden. Was wäre, wenn wir wollten:

  • Zeigen Sie unser Datum im japanischen oder persischen Kalender an
  • Verwenden Sie thailändische oder arabisch-indische Ziffern für Datum und Nummer
  • Verwenden Sie vereinfachtes Chinesisch
  • Irgendeine Kombination der oben genannten?

Was ist das Gebietsschema?

Um mit dieser API arbeiten zu können, müssen wir mehr über Gebietsschemas erfahren. Lassen Sie uns zunächst eine Definition geben.

Ein Gebietsschema ist eine Kennung, die sich auf eine Reihe von Benutzereinstellungen bezieht, z.

  • Datum und Uhrzeit
  • Zahlen und Währungen
  • übersetzte Namen für Zeitzonen, Sprachen und Länder
  • Messeinheiten
  • Sortierreihenfolge (Sortierung)

Ein Gebietsschema unterscheidet nicht zwischen Groß- und Kleinschreibung. Es ist nur eine Konvention .

Das Gebietsschema muss eine Zeichenfolge sein, die ein BCP 47-Sprach-Tag enthält, und alle Teile sind durch Bindestriche getrennt.

Schauen wir uns das nächste Beispiel an:

Wieder nur vier Codezeilen? Schauen wir uns das folgende Diagramm an und untersuchen jeden Teil unseres Gebietsschemas:

Auf diesem Bild sehen Sie, dass nur der erste Teil - Sprachcode - erforderlich ist. Es ist unwahrscheinlich, dass Sie ein solches Gebietsschema benötigen. Dies ist jedoch ein gutes Beispiel dafür, wie Sie sich jeden möglichen Teil des Gebietsschemas ansehen und eine Vorstellung davon bekommen, was ein Gebietsschema ist.

Unser Gebietsschema enthält alle möglichen Teile:

  • zh (Sprachcode) - Chinesische Sprache
  • Hans (Skriptcode) - in vereinfachten Zeichen geschrieben
  • CN (Ländercode) - wie in China verwendet.
  • bauddha (Variante) - mit einem buddhistischen hybriden Sanskrit-Dialekt
  • u-nu-hanidec (Erweiterung) - unter Verwendung von Han-Dezimalzahlen

Im Folgenden finden Sie weitere Beispiele für Skripte, Varianten und Erweiterungen.

Skriptcodes

Diese werden mit Sprach-Tags verwendet, um anzugeben, in welchem ​​Skript eine Sprache geschrieben ist. Zum Beispiel:

Variantencodes

Varianten repräsentieren einen Sprachdialekt.

Erweiterungen

Es enthält verschiedene Kalender und numerische Systeme.

Kalender haben das Präfix "u-ca-", mögliche Werte (nicht alle enthalten):

Numerische Systeme haben das Präfix "u-nu", mögliche Werte (nicht alle enthalten):

Die Iana-Organisation ist dafür verantwortlich, diese Liste auf dem neuesten Stand zu halten.

Gebietsschemaverhandlung

Das Letzte, was wir über Gebietsschemas lernen müssen, ist, wie sie aufgelöst werden. Wir haben dieses Beispiel schon einmal gesehen:

const formatter = new Intl.ctor(locales, options);

Das localesArgument gibt ein einzelnes Gebietsschema oder ein Array von Gebietsschemas an. Die Umgebung (Browser oder Node.js) vergleicht es mit den verfügbaren Gebietsschemas und wählt das beste aus.

Es gibt zwei Übereinstimmungsalgorithmen:

  • Lookup - Überprüft von spezifischer zu weniger: Wenn zh-Hans-SG nicht verfügbar ist, rufen Sie zh-Hans ab , wenn nicht - zh, sonst - ein Standardgebietsschema.
  • beste Anpassung (Standard) - Verbesserter Algorithmus. Wenn "es-GT" - Spanisch für Guatemala angefordert, aber nicht gefunden wird, wird anstelle eines Fallbacks als "es" das "es-MX" - Spanisch in Mexiko ausgewählt.

Wenn wir eine Reihe von Gebietsschemas bereitstellen, gewinnt das erste Spiel.

Also genug Theorie - jetzt ist die Zeit zum Üben!

Beispiele

Den Code für die Beispiele finden Sie auf GitHub.

Datums- / Uhrzeitformatierung

Gebietsschemas sind nicht das einzige, was an der Intl-API großartig ist. Sie können das Ergebnis mithilfe eines optionsArguments auf eine gewünschte Weise ändern .

Dies ist ein massives Update im Vergleich zum Date- Objekt!

Im Gegensatz zu moment.js können Sie keinen Teil des Datums wie Jahr und Monat manuell austauschen . Sie müssen stattdessen das richtige Gebietsschema verwenden. Dies mag nach einer Einschränkung klingen , macht es unseren Benutzern jedoch vertrauter.

Zahlenformatierung

Wenn Sie wissen, wie man mit Daten umgeht, wissen Sie, wie man mit Zahlen umgeht. Der einzige Unterschied ist die Liste der Optionen:

Währungsformatierung

Für die Währungen verwenden wir den Intl.NumberFormatKonstruktor, bieten jedoch eine andere Liste von Optionen:

Beachten Sie, dass wir hier kein Geld umwandeln. Wir formatieren lediglich die Nummer 172630 nach den entsprechenden Währungsregeln. Hier finden Sie die Liste der Währungscodes.

Formatierung mehrerer Regeln

Hier erfahren Sie, welches Formular basierend auf einer bestimmten Nummer für ein bestimmtes Gebietsschema gilt:

Es kann sehr praktisch sein, um Ordnungszahlen zu formatieren:

Zeichenfolgen sortieren

Das Sortieren von Zeichenfolgen, die zusätzliche Buchstaben wie ä in Deutsch oder Schwedisch enthalten, ist nicht das, was Sie manuell ausführen möchten, nur weil die Reihenfolge von der Sprache abhängt. Zum Glück haben wir . Und wieder müssen wir nur ein erforderliches Gebietsschema angeben:Intl.Collator

Fazit

Internationalisierung ist ein großes und komplexes Thema. Wenn Sie jedoch wissen, was ein Gebietsschema ist und wie es erstellt wird, ist der Rest sehr einfach zu verwenden.

Das ist es!

Wenn Sie Fragen oder Feedback haben, lassen Sie es mich in den Kommentaren unten wissen oder pingen Sie mich auf Twitter an.

Wenn dies nützlich war, klicken Sie bitte auf das Klatschen. Klicken Sie einige Male unten, um Ihre Unterstützung zu zeigen! ⬇⬇ ??

Hier sind weitere Artikel, die ich geschrieben habe:

So vereinfachen Sie Ihre Codebasis mit map (), redu () und filter () in JavaScript

Wenn Sie über Array.reduce lesen und wie cool es ist, ist das erste und manchmal einzige Beispiel, das Sie finden, die Summe von… medium.freecodecamp.org Produktionsfähiges Node.js REST-APIs-Setup mit TypeScript, PostgreSQL und Redis.

Vor einem Monat wurde mir die Aufgabe übertragen, eine einfache Such-API zu erstellen. Alles, was es tun musste, war, einige Daten von Drittanbietern abzurufen medium.com

Danke fürs Lesen ❤️