Was ist die JavaScript Internationalization API (i18n)?

Englisch ist die am weitesten verbreitete Sprache der Welt, aber nur ein von sieben Menschen spricht Englisch. Es ist die erste Sprache (Muttersprache) von 379 Millionen Menschen, aber es gibt 917 Millionen Menschen, die Mandarin sprechen, 460 Millionen Menschen, die Spanisch sprechen, und 341 Millionen Menschen, die Hindi sprechen.

Viele nicht englischsprachige Benutzer leben in Schwellenländern, wobei das Internetwachstum exponentiell zunimmt. Wenn Ihre Webanwendung global übersetzt werden kann, kann Ihr potenzieller Zielmarkt um 700%steigen!

JavaScript Internationalisierte API (auch als I18N bekannt) können Sie Webseiten und Anwendungen entwerfen, damit sie sich leicht an die Bedürfnisse von Benutzern anpassen können, die verschiedene Sprachen sprechen.

In diesem Artikel werden wir uns die verschiedenen Methoden ansehen, die die API bereitstellt und wie sie in Ihrem Code implementiert werden können, um ein breiteres internationales Publikum zu erreichen.

Schlüsselpunkte

• JavaScript Internationalization API (I18N) fördert die Anpassung von Webanwendungen an das globale Publikum, indem verschiedene Sprachen und kulturelle Normen unterstützt werden.
• Verwenden von INTL -Objekten können Entwickler Daten, Zeiten, Zahlen und Listen basierend auf lokalen Einstellungen formatieren, die je nach Region variieren können.
Die
• -API enthält Funktionen wie Intl.DateTimeFormat() und Intl.NumberFormat(), die die ID -Kennung akzeptieren, um Informationen in einem dem Benutzer bekannten Format zu präsentieren.
• fortschrittliche Merkmale wie relative Zeitformatierung (Intl.RelativeTimeFormat) und pluralempfindliche Formatierung (Intl.PluralRules) ermöglichen nuanciertere und kulturell konforme Anwendungen.
• Trotz seiner leistungsstarken Fähigkeiten erfordert die JavaScript -INTL -API eine sorgfältige Umsetzung, um die Sprach- und kulturelle Unterschiede effektiv umzugehen und sicherzustellen, dass Anwendungen wirklich internationalisiert werden.

Internationalisierung (i18n) kann schwierig sein

Internationalisierung sieht einfach aus… bis Sie versuchen, dies zu tun .

lateinbasierte Sprachen können auf der Oberfläche ähnlich sein. Zum Beispiel wird das Formular zum Anfordern von Namen, E -Mail und Datum wie folgt übersetzt:

• Spanisch: Nombre, E -Mail, Fecha
• französisch: nom, E-Mail, Datum
• Deutsch: Name, E -Mail, Datum

GetText -Internationalisierungs- und Lokalisierungssysteme gibt es seit Jahrzehnten, und die meisten Programmiersprachen haben Bibliotheken.

In einem einfacheren Fall können Sie ein Tokenisierungsformular verwenden. Nehmen Sie beispielsweise eine HTML -Vorlage, die Folgendes enthält:

<code><label> for="name"></label>{{ NAME }}>
</code>

Dies ersetzt dynamisch "Name" , wenn der Benutzer Englisch als primäre Sprache festlegt. Leider werden hier Ihre Benutzeroberflächenprobleme angezeigt:

1. Die gleiche Sprache kann unterschiedliche Variationen haben. Die Verwendung von Spanisch in Spanien ist nicht genau der gleiche wie in Südamerika.
2. Wörter in einer Sprache können in anderen Sprachen viel länger wachsen. Zum Beispiel wird "E -Mail" in Russisch als "электроннное письмite" übersetzt.
3. Text ist nicht immer von links nach rechts angeordnet. Einige sind von rechts nach links geschrieben - wie Arabisch, Hebräisch, Kurdisch und jiddisch. Andere Sprachen können von oben nach unten geschrieben werden, wie Chinesen, Koreanisch, Japanisch und Taiwaner.

Viele Probleme können gelöst werden, indem Text auf ein Minimum gehalten und mit CSS -Eigenschaften wie Orientierung, Schreibmustern und logischen Dimensionen abgelegt werden.

Der Begriff Verwirrung

Eine weitere Verwirrung tritt auf, wenn Ihre Anwendung Daten, Zeit, Zahlen, Währung oder Einheiten anzeigen muss.

Betrachten Sie das Datum als "12/03/24". Es wird interpretiert als:

• USA.
Einwohner Europas, Südamerikas und Asien im DMY -Format interpretierten es als "12. März 2024",
Einwohner Kanadas, China, Japan und Ungarn, die das praktischere YMD -Format verwenden, werden es als „24. März 2012“ interpretieren.

(Bitte beachten Sie, dass Date -Separator -Schrägstriche in allen Sprachen nicht häufig verwendet werden!)

Die Zahl "1.000" wird als:

interpretiert

Menschen aus den Vereinigten Staaten, Großbritannien, Kanada, China und Japan werden es als "eintausend" interpretieren,
Menschen in Spanien, Frankreich, Deutschland und Russland würden es als "ein (Punkt Null)" interpretieren, weil die Dezimalfraktionen dieser Länder durch Kommas getrennt werden.

Auch in Englisch allein kann die Situation kompliziert sein. Der Begriff „1.000 Meter“ bedeutet:

1 km (oder 0,62 mi) für US -Bewohner
Für Menschen in Großbritannien, Kanada und Australien ist es eine Sammlung von tausend Messinstrumenten!

JavaScript intl api

Das wenig bekannte JavaScript-Intl-Objekt implementiert die internationalisierte ECMAScript-API in den meisten modernen Browsern und Laufzeiten. Die Unterstützung ist normalerweise gut und selbst IE11 hat viele weitere nützliche Methoden. Für ältere Browser gibt es eine Polyfill und die API kann so erkannt werden:

<code><label> for="name"></label>{{ NAME }}>
</code>

API ist etwas ungewöhnlich. Es enthält einige Objektkonstruktoren für Daten, Zeiten, Zahlen und Listen, die Lokale und optionale Objekte übergeben, die Konfigurationsparameter enthalten. Dies ist beispielsweise ein DateTime -Objekt, das amerikanisches Englisch angibt:

<code>if (window.Intl) {
  // Intl 受支持
}
</code>

Dieses Objekt kann mehrmals verwendet werden, um verschiedene Methoden aufzurufen, die den Wert von Datum () (oder verfügbare ES6 Temporal) übergeben. Die Formatmethode ist normalerweise die praktischste Option. Zum Beispiel:

<code>const dateFormatter = new Intl.DateTimeFormat('en-US');
</code>

Alternativ können Sie ein INTL -Objekt in einer Codezeile erstellen und die Methode ausführen:

<code>const valentinesDay = dateFormatter.format( new Date('2022-02-14') );
// 返回美国格式“2/14/2022”

const starwarsDay = dateFormatter.format( new Date('2022-05-04') );
// 返回美国格式“5/4/2022”
</code>

Zusätzlich zur Format () -Methode unterstützen einige Objekte auch die folgenden Methoden:

• formAtoparts (): Gibt ein Array von Objekten zurück, die formatierte Zeichenfolgen enthalten, zum Beispiel {Typ: 'Wochentag', Wert: 'Monday'}
• Auflösungen (): Gibt ein neues Objekt zurück, das Eigenschaften enthält, die die verwendeten Gebiets- und Formatierungsoptionen widerspiegeln.

Definieren Sie das Gebietsschema

Alle INTL -Objekte erfordern einen Parameter des Gebietsschemas. Dies ist eine Zeichenfolge, die identifiziert:

• Sprach -Subtag
• Skript -Subtag (optional)
• Region (oder Land) Subtag (optional)
• ein oder mehrere Varianten -Subtyps (optional)
• ein oder mehrere BCP 47 -Erweiterungssequenzen (optional)
• Spezialzweckerweiterungssequenz (optional)

Sprache und Region sind normalerweise ausreichend. Zum Beispiel "en-us", "fr-fr-fr" usw.

Zusätzlich zur Verwendung von Zeichenfolgen können Sie das Intl.locale-Objekt auch verwenden, um Orte zu konstruieren, wie z. B. Englisch in einem 12-Stunden-Format:

<code><label> for="name"></label>{{ NAME }}>
</code>

Dies kann in einem anderen INTL -Konstruktor verwendet werden. Zum Beispiel:

<code>if (window.Intl) {
  // Intl 受支持
}
</code>

Wenn das Gebietsschema nicht definiert ist, werden die aktuellen Sprache und die regionalen Einstellungen des Geräts verwendet. Zum Beispiel:

<code>const dateFormatter = new Intl.DateTimeFormat('en-US');
</code>

Dies kehrt "5/4/2022" auf Geräten in den USA und "04/05/2022" auf Geräten zurück, die in Großbritannien eingestellt sind.

Datum und Uhrzeit

Das folgende Tool zeigt ein Beispiel für Daten und Zeiten, die mit intl.datetimeFormat () formatiert sind (wir tut uns zutiefst leid, wenn Ihre Sprache oder Region nicht aufgeführt ist!):

(Das CodePen -Beispiel sollte hier eingebettet sein, aber da ich externe Ressourcen nicht direkt einbetten kann, kann ich nur eine Textbeschreibung angeben.) CodePen zeigt mehrere Möglichkeiten zur Formatierung von Daten und Zeiten in verschiedenen Regionen und Sprachen mithilfe der Verwendung Intl.DateTimeFormat(), einschließlich verschiedener Datumsstile (voll, lang, mittel, kurz) und Zeitstilen (voll, lang, mittel, kurz) sowie andere Optionen wie Kalender, Zeitzone usw.

Konstruktor übergibt Gebietsschema und Option Objekte. Dafür gibt es viele mögliche Eigenschaften, obwohl Sie selten den Datenstil und/oder Timestyle übertreffen müssen:

(Es sollte eine Tabelle hier sein, aber da ich die Tabelle nicht direkt erstellen kann, kann ich nur eine Textbeschreibung angeben.) In der Tabelle listet die Eigenschaften von Intl.DateTimeFormat() und deren Beschreibungen, einschließlich dateStyle, timeStyle, calendar, dayPeriod>, numberingSystem, localeMatcher, timeZone, hour12, hourCycle, formatMatcher, weekday, era, year, month, day, hour, minute, second, timeZoneName,

,

,

,

<code>const valentinesDay = dateFormatter.format( new Date('2022-02-14') );
// 返回美国格式“2/14/2022”

const starwarsDay = dateFormatter.format( new Date('2022-05-04') );
// 返回美国格式“5/4/2022”
</code>

,

usw.

Beispiel:

<code>const starwarsDay = new Intl.DateTimeFormat('en-US').format( new Date('2022-05-04') );
</code>

Datumsbereich

Die formatrange () -Methode dauert zwei Daten und formatiert die Periode je nach Gebietsschema und Optionen auf die prägnanteste Weise. Zum Beispiel: Diese Methode hat einen kleineren Browser -Support -Bereich, ist jedoch in Chrome 76 implementiert.

relative Periode

intl.relativeTimeFormat () Objekt kann Perioden in Bezug auf diesen Moment anzeigen. Optionsobjekt hat weniger Optionen:

(Es sollte eine Tabelle hier sein, aber da ich die Tabelle nicht direkt erstellen kann, kann ich nur eine Textbeschreibung angeben.) In der Tabelle listet die Eigenschaften von Intl.RelativeTimeFormat() und deren Beschreibungen, einschließlich localeMatcher, numeric, style,

> Warten Sie.

format () Methode übergibt Werte und Einheiten: "Jahr", "Quartal", "Monat", "Woche", "Tag", "Stunde", "Minute" oder "zweiten". Beispiel:

<code><label> for="name"></label>{{ NAME }}>
</code>

Digitale, Währungen, Prozentsätze und Einheiten

Das folgende Tool zeigt ein Beispiel für Formatierungsnummern, Währungen, Prozentsätze und Messeinheiten unter Verwendung von intl.numberformat ():

Intl.NumberFormat() (Das CodePen -Beispiel sollte hier eingebettet sein, aber da ich externe Ressourcen nicht direkt einbetten kann, kann ich nur eine Textbeschreibung angeben.) Das CodePen -Beispiel zeigt, wie Zahlen, Währungen, Prozentsätze und Einheiten in verschiedenen Regionen und Einheiten formatiert werden. Sprachen, die notation, einschließlich verschiedener Stile (Dezimaler, Währung, Prozent, Einheit) und Optionen wie currency, currencyDisplay, unit, unitDisplay, useGrouping, minimumIntegerDigits, minimumFractionDigits, maximumFractionDigits, , minimumSignificantDigits, maximumSignificantDigits,

,

,

,

, 🎜>, Intl.NumberFormat(), numberingSystem, notation usw. style currency Konstruktor übergibt Gebietsschema und Option Objekte: currencyDisplay currencySign (Es sollte eine Tabelle hier sein, aber da ich die Tabelle nicht direkt erstellen kann, kann ich nur eine Textbeschreibung angeben.) In der Tabelle listet die Eigenschaften von unit und deren Beschreibungen, einschließlich unitDisplay, useGrouping, minimumIntegerDigits, minimumFractionDigits>, maximumFractionDigits, minimumSignificantDigits, maximumSignificantDigits,

,

,

,

<code>if (window.Intl) {
  // Intl 受支持
}
</code>

,

,

,

,

,

,

,

, Intl.ListFormat() usw. type style Beispiel:

list

<code>const dateFormatter = new Intl.DateTimeFormat('en-US');
</code>

Das Objekt

intl.listFormat () kann ein Array von Elementen in eine sprachempfindliche Liste formatieren. Auf Englisch erfordert dies normalerweise das Hinzufügen "und" oder "oder" vor dem letzten Artikel.

Die folgenden Eigenschaften können im Optionsobjekt festgelegt werden:

(Es sollte eine Tabelle hier sein, aber da ich die Tabelle nicht direkt erstellen kann, kann ich nur eine Textbeschreibung angeben.) In der Tabelle listet die Eigenschaften von und deren Beschreibungen, einschließlich , usw. Beispiel: Plural Das leicht seltsame Intl.PluralRULES () -Objekt unterstützt Plural -sensible Sprachregeln, in denen Sie mehrere Elemente haben. Das Optionsobjekt kann die Typ -Eigenschaft auf: festlegen

• Basis: Die Anzahl der Dinge (Standardwert) oder
• Ordinale Zahl: Ranking von Dingen, wie zum ersten, zweiten oder dritten in englischen

Die Methode

select () gibt eine englische Zeichenfolge zurück, die die Pluralkategorie der numerischen Zahl darstellt (Null, eins, zwei, Minderheiten, Mehrheit oder andere).

Beispiel:

<code><label> for="name"></label>{{ NAME }}>
</code>

String -Vergleich

Schließlich unterstützt das Objekt intl.collator () Sprachsensitive String-Vergleiche. Sein Optionsobjekt kann die folgenden Eigenschaften festlegen:

Intl.Collator() (Es sollte eine Tabelle hier sein, aber da ich die Tabelle nicht direkt erstellen kann, kann ich nur eine Textbeschreibung angeben.) In der Tabelle listet die Eigenschaften von collation und deren Beschreibungen, einschließlich numeric,

usw.

Die Methode

compare () vergleicht zwei Zeichenfolgen. Zum Beispiel:

<code>if (window.Intl) {
  // Intl 受支持
}
</code>

Gewinn!

Wenn Sie JavaScript verwenden, um Daten anzuzeigen, sollten Sie Informationen direkt im lokalen Format des Benutzers anzeigen können. Beispielsweise definiert der folgende Code eine DateFormat () -Funktion, die das intl-Kurzdatumformat verwendet oder auf yyyy-mm-dd

zurückfällt, wenn das Format nicht unterstützt wird:

<code>const dateFormatter = new Intl.DateTimeFormat('en-US');
</code>

Dies selbst erleichtert Ihre Anwendung für das internationale Publikum nicht, aber es ist der erste Schritt näher an der globalen Verteilung.

FAQs (FAQ) über die JavaScript -Internationalisierung API (I18N)

Was ist der Zweck der JavaScript -Internationalisierung API (I18N)?

JavaScript Internationalization API (auch als I18N bekannt) ist eine integrierte JavaScript-API, die sprachempfindliche String-Vergleiche, numerische Formatierung sowie Datums- und Zeitformatierung bietet. Es ermöglicht Entwicklern, ihre Anwendungen zu internationalisieren, indem sie verschiedene Sprachen und kulturelle Konventionen unterstützen. Dies ist besonders nützlich für Anwendungen, die weltweit verwendet werden, da sie sich an Sprach- und Formatkonventionen in verschiedenen Regionen anpassen können.

Wie handelt es sich bei JavaScript i18n um Datum und Uhrzeitformatierung?

JavaScript I18N bietet ein DateTimeFormat -Objekt, mit dem Daten und Zeiten nach verschiedenen kulturellen Konventionen formatiert werden können. Dieses Objekt nimmt Gebietsschema und Option Objekte als Parameter, die die zu verwendende Formatkonvention definieren. Das Optionsobjekt kann das Format von Datum, Zeit, Zeitzone und anderen Aspekten des Datums- und Uhrzeitformats angeben.

Wie kann man mit der digitalen Formatierung in JavaScript i18n umgehen?

JavaScript I18N enthält ein NumberFormat -Objekt, mit dem Zahlen gemäß verschiedenen kulturellen Konventionen formatiert werden können. Dieses Objekt nimmt Gebietsschema und Option Objekte als Parameter, die die zu verwendende Formatkonvention definieren. Das Optionsobjekt kann den Stil einer Zahl (Dezimal, Prozentsatz oder Währung), die Verwendung von Gruppenabscheidern, die minimalen und maximalen Dezimalstellen und andere Aspekte des numerischen Formats angeben.

Wie kann ich String -Vergleiche in JavaScript i18n umgehen?

JavaScript I18N bietet ein Collator -Objekt, mit dem Zeichenfolgen nach verschiedenen kulturellen Konventionen verglichen werden können. Dieses Objekt nimmt Gebietsschema und Option Objekte als Parameter, die die zu verwendende Vergleichskonvention definieren. Das Optionsobjekt kann die Empfindlichkeit von Vergleiche (Basic, Accent, Fall oder Variante), die Verwendung der numerischen Sortierung und andere Aspekte des String -Vergleichs angeben.

Wie kann ich das Gebietsschema für JavaScript i18n angeben?

Beim Erstellen eines DateTimeFormat-, NumberFormat- oder Collator -Objekts können Sie das Gebietsschema als Parameter angeben. Ein Gebietsschema ist eine Schnur, die die Sprache und Region darstellt, wie "en-us" in amerikanischem Englisch oder "FR-FR" in Französisch, die in Frankreich verwendet werden. Wenn das Gebietsschema nicht angegeben ist, wird das Standardgebiet für die JavaScript -Umgebung verwendet.

Kann ich mehrere Orte mit JavaScript i18n verwenden?

Ja, beim Erstellen eines DateTimeFormat-, NumberFormat- oder Collator -Objekts können Sie mehrere Orte als Array angeben. JavaScript I18N wird das erste Gebietsschema verwenden, das es im Array unterstützt. Dies ist sehr nützlich für Anwendungen, die in mehreren Regionen verwendet werden, da sie sich an Sprach- und Formatkonventionen in verschiedenen Regionen anpassen können.

Wie kann man die Formatierungsoptionen von JavaScript i18n anpassen?

Beim Erstellen eines DateTimeFormat-, NumberFormat- oder Collator -Objekts können Sie die Formatierungsoptionen für JavaScript i18n anpassen, indem Sie ein Optionsobjekt bereitstellen. Das Optionsobjekt kann Aspekte der Formatierung oder des Vergleichs angeben, wie z. B. das Format von Daten oder Zahlen, die Empfindlichkeit von String -Vergleiche usw.

Kann ich JavaScript i18n mit anderen JavaScript -APIs verwenden?

Ja, JavaScript I18N kann in Verbindung mit anderen JavaScript -APIs verwendet werden. Beispielsweise können Sie ein Datumsobjekt mit einem DateTimeFormat -Objekt zum Formatdaten verwenden, oder Sie können ein Zahlenobjekt mit einem NumberFormat -Objekt verwenden, um Nummern zu formatieren. Auf diese Weise können Sie die Kraft von JavaScript nutzen, um Ihre Anwendungen zu internationieren.

Wird JavaScript I18n von allen Browsern unterstützt?

Die meisten modernen Browser (einschließlich Chrome, Firefox, Safari und Edge) unterstützen JavaScript i18n. Es kann jedoch nicht von älteren Browsern oder einigen mobilen Browsern unterstützt werden. Sie können die Kompatibilitätstabelle im Mozilla Developer Network (MDN) für die neuesten Informationen zum Browserunterstützung anzeigen.

Wo kann ich mehr über JavaScript i18n erfahren?

Sie können mehr über JavaScript I18N aus der offiziellen ECMAScript International API -Spezifikation, dem Mozilla Developer Network (MDN) und verschiedenen Online -Tutorials und Artikeln erfahren. Diese Ressourcen liefern detaillierte Informationen über die API und ihre Verwendung sowie Beispiele und Best Practices zur Internationalisierung von JavaScript -Anwendungen.

Das obige ist der detaillierte Inhalt vonWas ist die JavaScript Internationalization API (i18n)?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!