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.
Intl.DateTimeFormat() und Intl.NumberFormat(), die die ID -Kennung akzeptieren, um Informationen in einem dem Benutzer bekannten Format zu präsentieren. Intl.RelativeTimeFormat) und pluralempfindliche Formatierung (Intl.PluralRules) ermöglichen nuanciertere und kulturell konforme Anwendungen. 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:
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:
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.
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:
(Bitte beachten Sie, dass Date -Separator -Schrägstriche in allen Sprachen nicht häufig verwendet werden!)
Die Zahl "1.000" wird als:interpretiert
<code><label> for="name"></label>{{ NAME }}>
</code>
<code>if (window.Intl) {
// Intl 受支持
}
</code>
<code>const dateFormatter = new Intl.DateTimeFormat('en-US');
</code>
<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>Alle INTL -Objekte erfordern einen Parameter des Gebietsschemas. Dies ist eine Zeichenfolge, die identifiziert:
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.
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>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.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,
format () Methode übergibt Werte und Einheiten: "Jahr", "Quartal", "Monat", "Woche", "Tag", "Stunde", "Minute" oder "zweiten". Beispiel:
<code><label> for="name"></label>{{ NAME }}>
</code>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>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: festlegenDie 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>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,
Die Methode
compare () vergleicht zwei Zeichenfolgen. Zum Beispiel:<code>if (window.Intl) {
// Intl 受支持
}
</code>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.
Was ist der Zweck der JavaScript -Internationalisierung API (I18N)?
Wie handelt es sich bei JavaScript i18n um Datum und Uhrzeitformatierung?
Wie kann man mit der digitalen Formatierung in JavaScript i18n umgehen?
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.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.
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.
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.
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.
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.
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!
Was bedeutet der Befehl rm-rf unter Linux?
Was ist der Hauptunterschied zwischen C-Sprache und Python?
Was ist mobiles HD?
Buchstaben-Abstand
Der Unterschied zwischen Mac Air und Pro
So kaufen und verkaufen Sie Bitcoin auf Okex
Verwendung der Wertfunktion
Lösung des Problems, dass die Eingabe beim Hochfahren des Computers nicht unterstützt wird
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
