So verwenden Sie die Intl-API in JavaScript

Die Intl API vereinfacht die Formatierung und Bearbeitung von internationalisiertem Text, Zahlen, Daten und Währungen. Damit können Sie je nach Gebietsschema mit verschiedenen Datenformaten umgehen.

Diese API löst die Herausforderung, Daten für verschiedene Kulturen und Sprachen zu formatieren. Es macht es einfach, Zahlen mit dem entsprechenden Währungssymbol oder Datumsangaben zu formatieren, indem das entsprechende Datumsformat für eine bestimmte Region verwendet wird.

Mit der Intl API können Sie Webanwendungen erstellen, die für Zielgruppen in allen Regionen und Kulturen zugänglich und einfach zu verwenden sind.

Abrufen des Gebietsschemas eines Benutzers

Der JavaScript-Konstruktoren die von der Intl API bereitgestellt werden, identifizieren das Gebietsschema, das sie verwenden, um Datum, Text, Zahl usw. nach einem vertrauten Muster zu formatieren. Jeder Konstruktor nimmt a

Gebietsschema und ein Optionen Objekt als Argumente. Unter Verwendung dieser Argumente vergleicht der Konstruktor die angeforderten Gebietsschemas mit den Gebietsschemas, die sie derzeit unterstützen.

Um das Gebietsschema eines Benutzers abzurufen, können Sie die navigator.sprache Eigentum. Diese Eigenschaft gibt eine Zeichenfolge zurück, die die Sprachversion des Browsers darstellt.

Der Wert der navigator.sprache -Eigenschaft ist ein BCP 47-Sprachtag, der aus einem Sprachcode und optional einem Regionscode und anderen untergeordneten Tags besteht. „en-US“ steht beispielsweise für Englisch, wie es in den Vereinigten Staaten gesprochen wird.

Sie können auch die verwenden navigator.sprachen -Eigenschaft, um ein Array der bevorzugten Sprachen des Benutzers zu erhalten, sortiert nach Priorität. Das erste Element im Array repräsentiert die primäre Sprachpräferenz des Benutzers.

Sobald Sie das Gebietsschema des Benutzers erhalten haben, können Sie die Anzeige Ihrer Anwendung von Datum, Uhrzeit, Zahlen und Währungen mithilfe von anpassen Intl API.

Sie können eine einfache erstellen JavaScript-Funktion um Ihnen zu helfen, das Gebietsschema eines Benutzers zu erhalten. Hier ist ein Code-Snippet, das helfen kann:

konst getUserLocale = () => {
Wenn (navigator.sprachen && navigator.sprachen.länge) {
zurückkehren navigator.sprachen[0];
 }
zurückkehren navigator.sprache;
};
Konsole.log (getUserLocale());

Das getUserLocale Die Funktion gibt das erste Element der Eigenschaft navigator.languages ​​zurück, sofern verfügbar. Andernfalls wird auf die Eigenschaft navigator.language zurückgegriffen, die die bevorzugte Sprache des Benutzers in älteren Browsern darstellt.

Formatieren von Datumsangaben für verschiedene Gebietsschemas

So formatieren Sie Datumsangaben mit der Intl API können Sie die verwenden Intl. DateTimeFormat() Konstrukteur. Dieser Konstruktor akzeptiert zwei Argumente: einen Locale-String und ein Optionsobjekt.

Das Optionsobjekt kann Eigenschaften enthalten, die die Formatierung des Datums steuern.

Zu den häufig verwendeten Optionen gehören:

• Wochentag: Diese Option gibt das Format des Wochentags an. Sie können es auf beides einstellen lang (Freitag), kurz (Fr), bzw eng (F).
• Jahr: Diese Option gibt das Format des Jahres an. Sie können es auf beides einstellen numerisch (2023) bzw 2-stellig (23).
• Monat: Diese Option gibt das Format des Monats an. Sie können es auf beides einstellen numerisch (3), 2-stellig (03), lang (Marsch), kurz (März), bzw eng (M).
• Tag: Diese Option gibt das Format des Tages an. Sie können es auf beides einstellen numerisch (2) bzw 2-stellig (02).

Hier ist ein Beispiel, das zeigt, wie ein Datum mit dem formatiert wird Intl. DateTimeFormat() Konstrukteur:

konst Datum = Datum.Jetzt()
konst Gebietsschema = getUserLocale();
konst Optionen = {
 Wochentag: "lang",
 Jahr: "numerisch",
 Monat: "lang",
 Tag: "numerisch",
};
konst Formatierer = neuIntl.DateTimeFormat (Gebietsschema, Optionen);
// Wochentag, Monatsdatum, Jahr (Freitag, 24. März 2023)
Konsole.log (formatter.format (Datum));

Dieser Code richtet ein Formatierungsobjekt ein, indem er das Gebietsschema des Benutzers übergibt Intl. DateTimeFormat(), zusammen mit einer Reihe von Optionen. Anschließend verwendet es den Formatierer, um das aktuelle Datum in einen String umzuwandeln. Der Optionen -Objekt enthält Eigenschaften, die die Formatierung des Datums steuern.

Verschiedene Arten von Zahlen formatieren

Du kannst den... benutzen Intl API zum Formatieren von Zahlen mit der Intl. Zahlenformat() Konstrukteur. Wie Intl. DateTimeFormat()verwendet dieser Konstruktor eine Gebietsschemazeichenfolge und ein Optionsobjekt als Argumente.

Das options-Objekt enthält Eigenschaften, die die Formatierung der Zahl steuern. Diese Eigenschaften variieren je nach Angabe Stil der Nummer.

Dezimalzahlen und Prozentzahlen formatieren

Mit können Sie Zahlen als Dezimalzahlen und Prozentzahlen formatieren Intl. Zahlenformat() Konstruktor, indem Sie die Eigenschaft style auf festlegen Dezimal für Dezimalstellen u Prozent für Prozente.

Hier ist ein Beispiel, das zeigt, wie eine Dezimalzahl formatiert wird:

konst Zahl = 123456;
konst Gebietsschema = getUserLocale(); // en-US
konst Optionen = {
 Stil: "Dezimal",
 minimumFractionDigits: 2,
 MaximumFractionDigits: 2,
 useGruppierung: WAHR,
};
konst Formatierer = neuIntl.NumberFormat (Gebietsschema, Optionen);
Konsole.log (formatter.format (num)); // 123,456.00

Der obige Codeblock formatiert 123.456 als Dezimalzahl mit Gruppierungstrennzeichen (,) und zwei Dezimalstellen.

Hier ist ein Beispiel, das zeigt, wie ein Prozentsatz formatiert wird:

konst Zahl = 123456;
konst Gebietsschema = getUserLocale();
konst Optionen = {
 Stil: "Prozent",
 useGruppierung: WAHR,
};
konst Formatierer = neuIntl.NumberFormat (Gebietsschema, Optionen);
Konsole.log (formatter.format (num)); // 12,345,600%

Der obige Codeblock drückt 123.456 als Prozentsatz mit Gruppierungstrennzeichen aus.

Währungen formatieren

Sie können Zahlen als Währungen formatieren, indem Sie die style-Eigenschaft auf festlegen Währung. Sie sollten andere Optionen daneben einstellen, wie zum Beispiel:

• Währung: Eine Zeichenfolge, die den ISO 4217-Währungscode darstellt (z. B. „USD“, „EUR“ oder „JPY“), der für die Formatierung verwendet werden soll. Wenn Sie diese Option nicht angeben, wählt der Formatierer einen Währungscode basierend auf dem Gebietsschema des Benutzers aus.
• Währungsanzeige: Diese Eigenschaft gibt an, wie der Browser die Währung anzeigen soll. Es kann entweder sein Symbol (75 USD), Code (75 USD) oder Name (75 US-Dollar).

Hier ist ein Beispiel, das zeigt, wie Sie Währungen formatieren können:

konst Zahl = 123456;
konst Gebietsschema = getUserLocale(); // en-US
konst Optionen = {
 Stil: "Währung",
 Währung: "US DOLLAR",
 Währungsanzeige: "Code",
};
konst Formatierer = neuIntl.NumberFormat (Gebietsschema, Optionen);
Konsole.log (formatter.format (num)); // USD 123.456,00

Der obige Codeblock formatiert 123.456 als Währung (USD).

Einheiten formatieren

Du kannst den... benutzen Intl. Zahlenformat() Konstruktor zum Formatieren von Zahlen mit Einheiten wie Länge, Volumen und Masse. Sie können dies tun, indem Sie die Stil Zu Einheit. Wenn Sie den Stil auf Einheit setzen, müssen Sie diese Optionen angeben:

• Einheit: Diese Eigenschaft gibt die für die Formatierung zu verwendende Einheit an, z. B. "Meter", "Kilogramm", "Liter", "Sekunde" usw.
• Einheit Anzeige: Diese Eigenschaft gibt an, wie der Browser die Einheit anzeigen soll. Sie können es auf beides einstellen lang (10 Liter), kurz (10 L), bzw eng (10l).

Hier ist ein Beispiel, das zeigt, wie Sie Einheiten formatieren können:

konst Zahl = 123456;
konst Gebietsschema = getUserLocale();
konst Optionen = {
 Stil: "Einheit",
 Einheit: "Liter",
 EinheitAnzeige: "lang",
};
konst Formatierer = neuIntl.NumberFormat (Gebietsschema, Optionen);
Konsole.log (formatter.format (num)); //123.456 Liter

Der obige Codeblock formatiert die Zahl 123.456 als Einheit in Liter.

Alternativen zur Intl API

Die Intl API bietet leistungsstarke und flexible Tools zum Formatieren von Datumsangaben, Zahlen, Währungen und Einheiten in JavaScript-Anwendungen. Es unterstützt viele Gebietsschemas und bietet eine konsistente Möglichkeit, Daten über verschiedene Kulturen und Sprachen hinweg zu formatieren.

Möglicherweise möchten Sie aufgrund der eingeschränkten Browserunterstützung für Intl. eine alternative Bibliothek wie Luxon oder Day.js verwenden. Letztendlich hängt die Entscheidung zwischen der Intl API oder einer Alternative von den spezifischen Anforderungen und Einschränkungen Ihres Projekts ab.