16 VIEWS

It’s #FrontendFriday – JS Integrierter NumberFormatter

15.10.2021

Standet ihr bereits vor der Herausforderung der Formatierung sowie Internationalisierung von Zahlen in JavaScript? Der ein oder andere wird mir jetzt zustimmen. Das ist keine dankbare jedoch mittlerweile eine wichtige Aufgabe. Denn der heutige Benutzer erwartet, insbesondere im eCommerce Bereich, aussagekräftige Zahlen. Eine integrierte JavaScript API, der sogenannte Intl.NumberFormat, schafft hierbei Abhilfe.
 
 

Das Objekt ermöglicht laut Spezifikationsbeschreibung die sprach abhängige Formatierung von Zahlen und ist somit genau das richtige Werkzeug, um die oben genannten Probleme zu lösen. Nochmals, ohne eine weitere Bibliothek hinzuzufügen. Der Konstruktor setzt sich aus zwei Argumenten zusammen. Das erste repräsentiert eine oder mehrere Locale-Zeichenketten und orientiert sich an der Best Current Practise 47. Das zweite Argument nimmt ein Konfigurationsobjekt mit folgenden Möglichkeiten entgegen:
 

    • „localeMatcher“ – Gibt den zu verwendeten Algorithmus für den Gebietsschamabgleich an.

 

    • „style“ – Diese Option gibt den zu verwendeten Formatierungsstil an. Mögliche Werte sind „decimal“, „currency“, „percent“ sowie „unit“.

 

    • „currency“ – Ist für die Währungsformatierung nach ISO 4217 vorgesehen. Falls im „style“-Property die Option „currency“ konfiguriert wurde.

 

    • „unit“ – Ermöglicht die genaue Spezifikation des „style“-Properties. Bei einer Auswahl von „unit“ kann beispielsweise noch die Einheit „kilometer-per-hour“ mit eingegeben werden.

 

    • „minimumIntegerDigits“ – Gibt die minimale Anzahl der zu verwendenden ganzzahligen Ziffern an.

 

    • „minimumFractionDigits“ – Ist die minimale Anzahl der zu verwendenden Bruchziffern.

 

    • „minimumSignificantDigits“ – Ist die minimale Anzahl signifikanter Stellen, die verwendet werden soll.

 

Übrigens, für die Digits-Gruppe ist auch eine Angabe von Maximalwerten möglich. Das vom Konstruktor erzeugte Objekt hat eine Format-Methode, die eine zu formatierende Zahl entgegennimmt. Folgend ein Beispiel:
 

Beispiel zu JavaScript NumberFormatter

 

Die Zeiten als man einen eigenen Formatierer schreiben musste sind vorbei. Nutzt die Superkraft des Browsers! Für die ganz harten unter euch, die noch mit der IE Unterstützung kämpfen. Es existieren Polyfills.

 

Quellen:
W3C
gitconnected

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*Pflichtfelder

*