Schlüsselpunkte
Dieser Artikel wurde von Julian Motz, Panayiotis Velisarakos, Vildan Softic und Tim Severien überprüft. Vielen Dank an alle SitePoint -Peer -Rezensenten, die SidePoint -Inhalte für den Besten erhalten haben!
Angenommen, Sie sind Entwickler und arbeiten am nächsten heißen Produkt. Ihre Kunden lieben Ihr Produkt und es hat in allen sozialen Netzwerken extrem hohe Bewertungen erhalten. Noch besser ist, dass der CEO gerade 10.000.000 US -Dollar an Finanzmitteln erhalten hat, um in neue Märkte zu expandieren. Bevor Sie global werden, müssen Sie Ihr Produkt aktualisieren, um verschiedene Sprachen, Währungen, Datumsformate und mehr zu unterstützen. Was denken Sie? Sie und Ihr Team werden dafür verantwortlich sein, dies zu erreichen. Aus technischer Sicht muss Ihre Software internationalisiert und dann lokalisiert werden.
Internationalisierung (auch als i18n bekannt) ist der Prozess des Erstellens oder Umwandelns von Produkten und Dienstleistungen, damit sie sich leicht an eine bestimmte Landessprache und Kultur anpassen können. Die Lokalisierung (auch als l10n bekannt) ist der Prozess der Anpassung der internationalisierten Software für eine bestimmte Region oder Sprache. Mit anderen Worten, Internationalisierung ist der Prozess der Unterstützung Ihrer Software, um mehrere Kulturen (Währungsformate, Datumsformate usw.) zu unterstützen, während die Lokalisierung der Prozess der Implementierung einer oder mehrerer Kulturen ist.
Diese beiden Prozesse werden häufig von Unternehmen übernommen, die an verschiedenen Ländern interessiert sind, aber sie können auch für einzelne Entwickler hilfreich sein, die auf ihren eigenen Websites arbeiten. Zum Beispiel wissen Sie wahrscheinlich, ich bin Italienisch und besitze eine Website. Meine Website ist derzeit in englischer Sprache, aber ich kann mich entscheiden, sie zu internationalisieren und dann nach Italienisch zu lokalisieren. Dies ist sehr vorteilhaft für diejenigen, die einheimische Italiener sind und mit Englisch nicht vertraut sind.
In diesem Artikel werde ich Ihnen Globalize, eine JavaScript -Bibliothek, entwickelt, die von einigen Mitgliedern des JQuery -Teams für Internationalisierung und Lokalisierung entwickelt wurde. Alle in diesem Artikel gezeigten Codeausschnitte finden Sie in unserem GitHub -Repository.
Aber bevor ich mich mit Globalize einlehne, möchte ich diese kurze Einführung über i18n mit den Worten des Projektleiters Rafael Xavier de Souza beenden:
Entwickler glauben, dass es in I18N um die Übersetzung in nicht englische Sprachen geht. I18N muss lediglich die aktuelle Anwendung auf mehrere Länder oder Märkte verlängern. Ich habe versucht zu erklären, dass es in I18n darum geht, "zu reden". Jede App muss irgendwann mit ihren Benutzern "sprechen". Um mit den Benutzern zu sprechen, kann die Anwendung Pluralunterstützung, Geschlechtsschwankungen, Datumsformatierung, digitale Formatierung und Währungsformatierung erfordern. Auch auf Englisch kann es schwierig sein, den Job richtig zu erledigen.
Globalize ist Eine JavaScript -Bibliothek für Internationalisierung und Lokalisierung, die die offiziellen Unicode -CLDR -JSON -Daten verwendet.
Diese Bibliothek ist Open Source und wird von Rafael Xavier de Souza und einigen Mitgliedern des JQuery -Teams entwickelt.
Globalisiert Unicode-Konsortium-basierte Unicode-Konsortium-Datenrepository (CLDR), das größte und umfassendste Standard-Repository für verfügbare Gebietsschemasdaten. Im Gegensatz zu Bibliotheken, die Gebietsschemasdaten einbetten, können Sie bei Verwendung von Globalize problemlos immer die neuesten CLDR -Daten verwenden.
Diese Bibliothek ist für Browser und Node.js -Module geeignet. Globalize 1.0 unterstützt alle wichtigen Browser, einschließlich IE9, Chrome, Firefox, Safari 5.1 und Opera 12.1.
Die Hauptfunktionen dieser Bibliothek umfassen:
Was mir an Globalize am meisten gefällt, ist, dass es für jede seiner Funktionen ein Modul bereitstellt. Der Entwickler benötigt möglicherweise nicht die gesamte Bibliothek, damit er die Module, die er benötigt, auswählen kann. Ein weiteres interessantes Merkmal ist, dass der Code im Gegensatz zu anderen Bibliotheken vom Inhalt getrennt hält, indem sie keine Gebietsschemasdaten in der Bibliothek gehostet oder einbettet.
Aber Globalize ist nicht die einzige Option. Wenn Sie an anderen Alternativen interessiert sind, hat Rafael eine engagierte Seite. Die bemerkenswerteste Alternative ist I18Next.
Dies mag für einige von Ihnen überraschend sein, aber JavaScript unterstützt native Unterstützung für die Internationalisierung durch die Internationalisierung API (auch als ECMA-402 bekannt). Ein INTL -Objekt ist ein Objekt, das auf einem Fensterobjekt verfügbar ist, das als Namespace für die internationalisierte API fungiert. Diese API enthält derzeit Methoden zum Format von Zahlen und Daten sowie Vergleich von Zeichenfolgen in einer bestimmten Sprache.
Jetzt, da Sie die Existenz einer internationalen API kennen, denken Sie vielleicht, dass Globalize sie hinter den Kulissen verwendet. Dieser Ansatz wird sicherlich die Leistung von Datum und Zahlenformatierung verbessern. Aufgrund der geringen und sehr inkonsistenten Unterstützung unter den Browsern verwendet die Bibliothek sie jedoch nicht.
Ich möchte, dass Sie die internationale API erleben, bevor wir weiterhin Globalize diskutieren.
Das erste Beispiel, das ich zeigen werde, ist die Verwendung der internationalen API, um Daten in mehreren Orten zu formatieren: IT, US und GB.
// 2016 年 6 月 30 日
var date = new Date(2016, 5, 30);
// "30/6/2016"
console.log(new Intl.DateTimeFormat('it-IT').format(date));
// "6/30/2016"
console.log(new Intl.DateTimeFormat('en-US').format(date));
// "30/06/2016"
console.log(new Intl.DateTimeFormat('en-GB').format(date));In diesem Beispiel verwende ich das angegebene Gebietsschema ("It-it", "en-us" und "en-gb"), um ein neues Datumformatter mithilfe des Konstruktors DateTimeFormat zu erstellen. Dann rufe ich die Formatmethode auf, um das Datumsobjekt zu formatieren.
Der obige Code kann auch als JSBIN verwendet werden.
Wie bereits erwähnt, können Sie mit der API auch Zahlen formatieren. Hier ist ein Beispiel mit dem NumberFormat -Konstruktor:
var number = 1302.93;
// "1.302,93"
console.log(new Intl.NumberFormat('it-IT').format(number));
// "1,302.93"
console.log(new Intl.NumberFormat('us-US').format(number));
// "1,302.93"
console.log(new Intl.NumberFormat('en-GB').format(number));Wenn Sie sich die Ausgabe dieses zweiten Code -Snippets ansehen (das auch als JSBIN verwendet werden kann), können Sie feststellen, dass wir in Italien unterschiedliche Formate für Zahlen haben als in den USA und im Vereinigten Königreich.
Wie bereits erwähnt, ist die Unterstützung für diese API niedrig. Wenn Sie sie jedoch verwenden möchten, können Sie diese Polyfill in Ihrer Anwendung verwenden.
Jetzt, da ich Ihnen ein besseres Verständnis dafür gegeben habe, wie Internationalisierung und Lokalisierung funktionieren, diskutieren wir Globalize.
globalisiert kann einfach über NPM installiert werden:
npm install globalize cldr-data --save
Dieser Befehl installiert auch CLDR -Daten, die zum Laden von Gebietsschema -Daten erforderlich sind (z. B. in einem Sprachformat für Zahlen oder Daten). Nach der Installation dieser beiden Pakete können wir die Bibliothek verwenden.
Hinweis: Das folgende Beispiel wird davon ausgegangen, dass der Knoten verwendet wird. Wenn Sie daran interessiert sind, Globalize in Ihrem Browser zu verwenden, schlage ich vor, dass Sie mit einem Beispiel auf der Projekt -Homepage beginnen. Das Beispiel für Webpack macht es besonders einfach, schnell einzubauen.
Als nächstes werde ich Globalize verwenden, um die beiden im vorherigen Abschnitt aufgeführten Code -Snippets neu zu schreiben.
Das erste Beispiel kann wie folgt implementiert werden:
// 2016 年 6 月 30 日
var date = new Date(2016, 5, 30);
// "30/6/2016"
console.log(new Intl.DateTimeFormat('it-IT').format(date));
// "6/30/2016"
console.log(new Intl.DateTimeFormat('en-US').format(date));
// "30/06/2016"
console.log(new Intl.DateTimeFormat('en-GB').format(date));Obwohl es einfach ist, ermöglicht ich mit dem obigen Code mehrere Themen. Als ich Globalize zum ersten Mal verwendet habe, fand ich es ein bisschen seltsam, dass einige der für CLDR -Daten verwendeten Sprachcodes nur zwei Buchstaben verwenden. Um die Konsistenz aufrechtzuerhalten, möchte ich, dass alle Orte vollständige Versionen des ISO 3166-Standards (z. B. "IT-it" und "en-us") anstatt kurze Versionen (z. B. "It" und "EN") erfordern. Es erscheint zwar vernünftig anzunehmen, dass Italienisch Italienisch ist (Italienisch stammt schließlich aus Italien), aber dies ist verwirrend für Englisch. "en" bedeutet amerikanisches Englisch, nicht britisches Englisch. Wenn Sie sicherstellen möchten, dass Sie nicht die gleichen Fehler machen wie ich, schlage ich vor, dass Sie sich diese Tabelle ansehen.
Ein weiteres Konzept, das es wert ist, skizziert zu werden, ist die methodische Versicherung (die dritte Anweisung des Codes). Dadurch werden alle Dateien geladen, die zusätzliche Informationen für Land- oder Gebietsschemasdaten enthalten. Zum Beispiel der Telefonländercode (39 in Italien), die Bevölkerung, einige bekannte Abkürzungen, wie man die Währungen anderer Länder buchstabiert usw.
Der letzte Punkt, den ich einführen möchte, ist die vierte Aussage, bei der ich die Vom -Methode nenne. Dies ermöglicht das Laden von Gebietsschemasdaten für das erforderliche Land (Italien, die Vereinigten Staaten und das Vereinigte Königreich im obigen Beispiel).
Für Formatierungsnummern liefert Globalize die Formatnummer -Methode. Die Signatur dieser Methode ist
var number = 1302.93;
// "1.302,93"
console.log(new Intl.NumberFormat('it-IT').format(number));
// "1,302.93"
console.log(new Intl.NumberFormat('us-US').format(number));
// "1,302.93"
console.log(new Intl.NumberFormat('en-GB').format(number));wobei der Wert die Nummer ist, die formatiert werden soll, ist die Optionen ein Objekt für benutzerdefinierte Methodenrückgabewert. Einige Beispiele für Optionen, die Sie angeben können, sind:
Die vollständige Liste der verfügbaren Optionen finden Sie in der Dokumentation.
Jetzt, da wir mehr über die Formatnummer -Methode erfahren haben, lassen Sie uns sehen, wie sie tatsächlich gilt.
npm install globalize cldr-data --save
Die Bibliothek bietet eine CurrencyFormatter -Methode, mit der Sie Währungswerte formatieren können. Diese Methode unterstützt viele Optionen und ermöglicht es Ihnen, zu definieren, ob Sie die Nummer rundern möchten, ob Sie das Symbol der Währung (wie "$") oder des Code (z. B. "USD") und so weiter verwenden möchten.
Ein Beispiel für die Verwendung von CurrencyFormatter () ist unten dargestellt:
// 包含 Globalize 库
var Globalize = require('globalize');
// 包含 CLDR 数据
var cldrData = require('cldr-data');
// 加载补充数据
Globalize.load(cldrData.entireSupplemental());
// 加载指定语言环境的数据
Globalize.load(cldrData.entireMainFor('it', 'en', 'en-GB'));
// 2016 年 6 月 30 日
var date = new Date(2016, 5, 30);
// "30/6/2016"
console.log(Globalize('it').formatDate(date));
// "6/30/2016"
console.log(Globalize('en').formatDate(date));
// "30/06/2016"
console.log(Globalize('en-GB').formatDate(date));Lösungsnummern können auch eine Aufgabe sein, die Sie ausführen müssen, z. B. bei der Verarbeitung von Benutzereingaben. Das folgende Beispiel zeigt, wie das geht:
formatNumber(value[, options])
Eine weitere sehr häufige Funktion in modernen Webanwendungen besteht darin, Zeit und Datum in relativen Begriffen anzuzeigen. Zum Beispiel finden Sie oft Labels wie "gestern" und "letzte Woche", anstatt das volle Datum des Tages anzuzeigen. Mit Globalize kann diese Aufgabe mit der Relativetimeformatter -Methode leicht erledigt werden. Hier ist ein Beispiel für die Nutzung:
// 2016 年 6 月 30 日
var date = new Date(2016, 5, 30);
// "30/6/2016"
console.log(new Intl.DateTimeFormat('it-IT').format(date));
// "6/30/2016"
console.log(new Intl.DateTimeFormat('en-US').format(date));
// "30/06/2016"
console.log(new Intl.DateTimeFormat('en-GB').format(date));Globalize bietet viele andere Methoden, die ich in diesem Artikel nicht behandelt habe. Die hier vorgestellten Themen sollten Ihnen jedoch genügend Informationen zur Verfügung stellen, um den Einstieg zu erleichtern. Darüber hinaus ist die Dokumentation für diese Bibliothek sehr detailliert.
In diesem Artikel diskutiere ich, was Internationalisierung und Lokalisierung sind und warum sie für die Erweiterung des Marktes für Produkte sehr wichtig sind. Ich habe kurz die internationalisierte API vorgestellt, indem ich einige unterstützte Merkmale erwähnte, und dann zeigte ich einige Beispiele für ihre Verwendung.
Im zweiten Teil dieses Artikels stelle ich Ihnen Globalize vor, eine JavaScript -Bibliothek, die vom JQuery -Team zur Internationalisierung und Lokalisierung entwickelt wurde. Die Bibliothek ist sehr leistungsstark und verfügt über alle Methoden, die Sie möglicherweise für die Internationalisierung Ihres Projekts benötigen, z. B. Möglichkeiten zum Analysieren von Zahlen, Formatdaten und Formatwährungswerten. Wenn Sie der Meinung sind, dass die Bibliothek Ihnen Zeit spart, können Sie es gerne zurückgeben, indem Sie zum Projekt beitragen.
Erinnern Sie erneut daran, dass alle in diesem Artikel gezeigten Codeausschnitte in unserem Github -Repository gefunden werden können.
Internationalisierung, oft als i18n abgekürzt, ist ein wichtiger Aspekt der Webentwicklung, insbesondere beim Erstellen von Anwendungen für globales Publikum. Dazu gehören Sie Ihre Website oder Anwendung zur Unterstützung mehrerer Sprachen und regionalen Unterschiede. Dies ist besonders wichtig in JavaScript, einer in der Webentwicklung verwendeten Sprache. Durch die Implementierung von I18N in JavaScript können Entwickler Anwendungen erstellen, die unterschiedliche Benutzergruppen erfüllen und so die Benutzererfahrung und die Zugänglichkeit verbessern. Es hilft auch bei der Lokalisierung von Anwendungen, die die Abdeckung und Verwendbarkeit von Anwendungen erheblich verbessern können.
i18n in JavaScript funktioniert, indem Entwickler aus dem Code der Anwendung externalisiert werden können. Diese Zeichenfolgen werden dann in separaten Dateien gespeichert, die häufig als Ressourcenpakete bezeichnet werden. Jedes Ressourcenpaket entspricht einem bestimmten Gebietsschema. Wenn die Anwendung ausgeführt wird, werden das Gebietsschema des Benutzers erkannt und das entsprechende Ressourcenpaket geladen. Auf diese Weise kann die Anwendung Nachrichten und Inhalte in der bevorzugten Sprache des Benutzers anzeigen.
Es sind mehrere Bibliotheken zur Implementierung von I18N in JavaScript verfügbar. Einige der beliebtesten Bibliotheken umfassen i18Next, i18n-js und Globalize. Diese Bibliotheken bieten eine Reihe von Merkmalen, um die Internationalisierung zu erleichtern, wie z. B. Spracherkennung, Pluralisation, numerische und Datumsformatierung und vieles mehr. Sie unterstützen auch verschiedene Frameworks wie React, Angular und Vue.js und machen sie zu einem vielseitigen Tool für die Webentwicklung.
Um die I18N-JS-Bibliothek in Ihrem JavaScript-Projekt zu verwenden, müssen Sie sie zunächst mit NPM oder Garn installieren. Nach der Installation können Sie es in Ihr Projekt importieren und die Funktionen verwenden. Diese Bibliothek bietet Funktionen zum Übersetzen von Zeichenfolgen, Formatiernummern und Daten und mehr. Sie können Ihre Übersetzungen auch in einer separaten JSON -Datei definieren, die diese Dateien entsprechend dem Gebietsschema des Benutzers laden kann.
Ja, i18n kann in JavaScript implementiert werden, ohne Bibliotheken zu verwenden. Dies kann durch manuell externalisiertes Gebietsschema-spezifische Zeichenfolgen aus Ihrem Code erfolgen und in separaten Dateien gespeichert werden. Für größere Anwendungen kann dieser Ansatz jedoch zeitaufwändig und komplex sein. Verwenden Sie Bibliotheken, um den Prozess zu vereinfachen und zusätzliche Funktionen bereitzustellen, die die Anwendungs -Internationalisierung verbessern.
Die Pluralisierung in i18n kann aufgrund unterschiedlicher Pluralregeln in verschiedenen Sprachen schwierig sein. Viele i18n -Bibliotheken bieten jedoch die Möglichkeit, mit Pluralisierung umzugehen. Beispielsweise bietet die I18N-JS-Bibliothek eine Pluralize-Funktion, die Pluralformen entsprechend dem Gebietsschema des Benutzers verarbeiten kann.
Testen der Internationalisierung der Anwendung umfasst die Überprüfung, ob die Anwendung Inhalte und Formate in verschiedenen Sprachen basierend auf dem Gebietsschema des Benutzers korrekt anzeigt. Dies kann durchgeführt werden, indem die Gebietsschemaseinstellungen im Browser manuell geändert werden oder automatisierte Testwerkzeuge verwendet werden. Es ist auch wichtig, Kantenfälle wie mangelnde Übersetzung oder falsche Pluralformen zu überprüfen.
Datums- und Zahlenformate können zwischen den Orten erheblich variieren. Viele i18n -Bibliotheken bieten die Möglichkeit, Daten und Zahlen gemäß dem Gebietsschema des Benutzers zu formatieren. Beispielsweise bietet die I18N-JS-Bibliothek Formatdat- und Formatnumberfunktionen, die diese Aufgaben erledigen können.
RTL-Sprachen von rechts nach links (RTL) in I18N beinhalten die Anpassung der Layout- und Textausrichtung der Anwendung basierend auf dem Gebietsschema des Benutzers. Dies kann mit CSS- und HTML -Eigenschaften erfolgen. Einige i18N -Bibliotheken bieten auch die Funktionalität, um RTL -Sprachen zu bewältigen.
-Lokalisierung, die normalerweise als L10N abgekürzt wird, beinhaltet die Anpassung Ihrer Anwendung an ein bestimmtes Gebietsschema, einschließlich Übersetzungsinhalt, Formatierungsdaten und -zahlen und mehr. Während I18N Ihre Anwendung auf die Unterstützung mehrerer Orte vorbereitet, umfasst L10N diese Optimierungen für jedes bestimmte Gebietsschema. Viele I18N -Bibliotheken bieten auch die Funktionalität zur Lokalisierung.
Das obige ist der detaillierte Inhalt vonSo implementieren Sie Internationalisierung (I18N) in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Allgemeine Postgresql-Befehle
Was soll ich tun, wenn ich auf TikTok nur eine private Nachricht senden kann?
MySQL-Datenbank wiederherstellen
Was sind die gängigen Managementsysteme?
Waffenkammerkiste
Was bedeutet PS-Maske?
So löschen Sie Array-Elemente in JavaScript
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
