Formatiere eine Zahl in JavaScript

Es gibt verschiedene Möglichkeiten, wie Personen aus verschiedenen Ländern und Regionen eine Zahl auf unterschiedliche Weise formatieren. Und es könnte Fälle geben, in denen wir eine Zahl auf unseren Websites basierend darauf formatieren möchten, in welchem ​​Teil der Welt der Besucher auf unsere Website zugreift.

Es könnte schwierig werden, dies manuell basierend auf dem Standort des Benutzers zu tun. Aber keine Sorge, Sie müssen dies nicht manuell tun, da es eine bessere Möglichkeit gibt, eine Zahl in JavaScript zu formatieren, und zwar mit Hilfe der Methode toLocalString(). Diese Methode gibt einen String mit der sprachspezifischen Darstellung der Zahl zurück.

Zahlen mit der Methode toLocaleString() in JavaScript formatieren

Es braucht zwei Parameter, erstens locales und zweitens options. Beide Parameter sind optional, d. h. sie sind nicht obligatorisch. Sie können die Methode auch direkt ausführen, ohne diese Parameter zu übergeben. Wenn Sie die Zahlen in diesem Fall formatieren möchten, müssen wir diese Parameter übergeben.

Lassen Sie uns zuerst verstehen, was jeder dieser Parameter bedeutet, und später werden wir sehen, wie wir sie in unserem Code verwenden.

1. Der Parameter locales

Die locales ist der erste Parameter, den die Methode toLocalString() akzeptiert. Es stellt eine Zeichenkette von BCP 47-Sprach-Tags oder ein Array solcher Zeichenketten dar. Das Sprach-Tag BCP 47 ist ein Code zur Identifizierung menschlicher Sprachen.

Zum Beispiel sagt das Tag ar-SA, dass es für die arabische Sprache steht, die durch ar repräsentiert wird und in der Region Saudi-Arabien SA gesprochen wird. Wenn Sie diese Zeichenkette als erstes Argument übergeben, wird die Zahl so formatiert, dass sie in arabischer Sprache geschrieben wird.

let eArabic = (number => {
  return number.toLocaleString('ar-SA');
});

console.log(eArabic(12345));

Ausgabe:

١٢٬٣٤٥

Hier haben wir eine Pfeilfunktion namens eArabic erstellt, die als Parameter eine Zahl verwendet. Nun übergeben wir dieser Pfeilfunktion die Zahl 12345. Diese Funktion zielt darauf ab, die Zahl 12345 mit Hilfe der Methode toLocalString() in ihr arabisches Äquivalent ar-SA umzuwandeln.

Sie können den gesamten obigen Code direkt kopieren und einfügen und im Konsolenfenster Ihres Browsers ausführen, um die Ausgabe anzuzeigen.

Um mehr über alle BCP 47-Sprach-Tags zu erfahren, können Sie einen Blick auf diese Ressource werfen.

Sie können auch undefined als Locales übergeben. Es wird die Standardsprache verwendet, die im Browser des Besuchers eingestellt ist. Wenn also jemand die Sprache seines Browsers auf Deutsch geändert hat, wird die Nummer im deutschen Format angezeigt.

2. Der Parameter options

Die options ist ein Objekt und der zweite Parameter, den die Methode toLocalString() akzeptiert. Da es sich um ein Objekt handelt, kann dieser Parameter verschiedene Eigenschaften wie currency, currencySign, style, unitDisplay und viele mehr annehmen.

Nehmen wir das gleiche Beispiel, das wir oben genommen haben, und versuchen wir, es zu ändern, um den Parameter options zu verstehen. Bisher nehmen wir einfach die Zahl 12345 und formatieren sie dann in die arabische Sprache. Nun geben wir der Zahl auch eine Währungsformatierung, indem wir ihr den Stil currency mit Währungssymbol geben und am Ende dieser Zahl mit Hilfe von options einige Nachkommastellen hinzufügen.

let eArabic = (number => {
  return number.toLocaleString(
      'ar-SA', {style: 'currency', currency: 'SAR', minimumFractionDigits: 3});
});

console.log(eArabic(12345));

Ausgabe:

١٢٬٣٤٥٫٠٠٠ ر.س

In diesem Fall haben wir der Methode toLocaleString() jetzt auch den Parameter options hinzugefügt, der ein Objekt ist. Derzeit sind 3 Eigenschaften erforderlich, die Eigenschaft style formatiert die Zahl im Währungsformat, die Eigenschaft currency gibt an, welche Währung sie darstellt, in diesem Fall Saudi-Riyal SAR und die Eigenschaft minimumFractionDigits repräsentiert wie viele Nachkommastellen, die am Ende der Zahl angezeigt werden sollen.

Wenn Sie hier die Eigenschaft style mit dem Wert Währung setzen, müssen Sie auch die Eigenschaft currency mit einem Wert setzen. Andernfalls erhalten Sie einen Typfehler: Currency code is required with currency style.

In der Ausgabe des obigen Programms haben wir zunächst den Währungsnamen Saudi-Riyal ر.س.. Wenn es USD wäre, wäre es das Symbol $. Dann haben wir die Nummer selbst in arabischer Sprache ١٢٬٣٤٥. Wenn es in USD wäre, wäre es 12,345. Schließlich haben wir die 3 Nachkommastellen nach dem Punkt, die in der arabischen Sprache als ٫٠٠٠ und USD als .000 dargestellt werden.

// USD format
$12, 345.000

Hier stellen wir Ihnen auch die Ausgabe für das US-Währungsformat zur Verfügung, um sie leicht mit der Ausgabe des saudi-arabischen Währungsformats in Verbindung zu bringen, da es für die Menschen möglicherweise schwierig ist, die arabische Sprache zu verstehen.

Sie können jeden dieser Parameter und Objekteigenschaften in Ihrem Code verwenden, je nachdem, wie Sie Ihre Zahl formatieren möchten. Sie können auch die verschiedenen Links in diesem Artikel besuchen, um mehr über den toLocalString() zu erfahren, um eine Zahl in JavaScript zu formatieren.