Zahlen im Kundenportal richtig anzeigen: Intl.NumberFormat statt Komma-Ersatz
Das Problem mit dem selbstgebauten Komma
Viele Portale ersetzen im Text einfach den Punkt durch ein Komma. Das funktioniert, bis tausend Euro erscheinen, ein Betrag nur eine Nachkommastelle hat oder eine Zahl mit einem anderen Format aus dem Backend kommt. Dann steht dort "1234.5 €" oder "1.234,5 €". Der Browser kann diese Arbeit besser erledigen.
Was die Dokumentation zeigt
Die MDN-Seite zu Intl.NumberFormat beschreibt ein Objekt, das Zahlen nach Sprache und Optionen formatiert. Mit der Sprache de-DE und dem Stil Währung in Euro wird aus 123456.789 die Anzeige "123.456,79 €". Das Beispiel zeigt auch, dass Währungen unterschiedlich viele Nachkommastellen haben, etwa der japanische Yen ohne Untereinheit. Außerdem lässt sich eine Liste von Sprachen mit Ersatzsprachen übergeben, und supportedLocalesOf prüft, welche Sprachen ohne Rückfall auf die Standardsprache unterstützt werden. Mit formatToParts erhält man die einzelnen Bestandteile, falls das Design eine eigene Darstellung braucht.
Das sind dokumentierte Eigenschaften. Alles Weitere unten ist eine Empfehlung aus der Praxis.
Ein hypothetisches Beispiel
Der fiktive Heizungsbau Lindner betreibt ein Portal, in dem Kunden offene Abschlagszahlungen und Wartungsrechnungen sehen. Ein Betrag kommt als Zahl aus der Schnittstelle. Das Portal soll ihn anzeigen, summieren und in einem Feld "Teilzahlung" erneut entgegennehmen.
Drei Aufgaben, drei Wege
- Anzeige: Ein einmal angelegtes Formatierungsobjekt für de-DE mit Währung Euro, an allen Stellen wiederverwendet. So sehen Liste, Detailseite und Quittung gleich aus.
- Berechnung: Rechnen Sie nie mit dem angezeigten Text. Empfehlung: Beträge intern als ganze Cent oder als Dezimalzeichenfolge führen, summieren und erst zuletzt formatieren. Die Rundung in der Anzeige ist keine Buchungsregel.
- Eingabe: Hier gilt ein eigener Weg. Nutzer tippen "1.250,50", "1250,5" oder "1250.50". Entscheiden Sie eine feste Regel, zeigen Sie unter dem Feld die verstandene Zahl als Vorschau und lassen Sie mehrdeutige Eingaben nicht stillschweigend durch.
Betriebliche Entscheidung
Lindner legt fest: Das Portal ist deutschsprachig, die Anzeige nutzt de-DE, die Währung ist Euro. Eingaben werden nur mit Komma als Dezimaltrenner akzeptiert, Punkte als Tausendertrenner werden ignoriert, andere Zeichen führen zu einer Fehlermeldung. Wird später eine zweite Sprache ergänzt, kommt die Sprache aus den Einstellungen des Nutzers, nicht aus dem Betrag. MDN zeigt etwa, dass ar-EG arabisch-indische Ziffern ausgibt. Wer eine solche Anzeige zulässt, muss die Eingabe entsprechend prüfen.
Fehlerfälle
- Ein Wert fehlt oder ist keine Zahl: Zeigen Sie einen Strich und melden Sie den Fall intern, statt "NaN €" auszugeben.
- Eine Sprache wird nicht unterstützt: Geben Sie eine Ersatzsprache an und prüfen Sie das Ergebnis.
- Die Summe auf der Seite weicht um einen Cent ab: Die Ursache liegt fast immer in einer Rundung vor dem Addieren. Addieren Sie zuerst, formatieren Sie danach.
- Ein Nutzer fügt einen Betrag aus einer PDF-Rechnung ein: Entfernen Sie Leerzeichen und das Währungszeichen vor der Prüfung, und zeigen Sie die Vorschau.
- Leerzeichen und Währungssymbol im Text lassen sich schlecht umbrechen: Das ist eine Gestaltungsfrage. Prüfen Sie sie in der echten Oberfläche, nicht im Code.
Vorgeschlagene Abnahmeliste (nicht durchgeführt)
Diese Liste ist ein Vorschlag. Keiner der Punkte wurde geprüft.
- Alle Beträge im Portal laufen durch dasselbe Formatierungsobjekt.
- Im Code gibt es kein Ersetzen von Punkt durch Komma.
- Summen werden aus Rohwerten gebildet, nie aus Text.
- Das Eingabefeld hat eine dokumentierte Regel und eine sichtbare Vorschau.
- Testwerte sind angelegt: 0, 0,5, 1000, 1234567,89, ein negativer Betrag und ein leerer Wert.
- Ein Betrag in der E-Mail und im PDF stimmt mit der Anzeige im Portal überein.
- Die verwendete Sprache steht in der Konfiguration, nicht verstreut im Code.
Abgrenzung
Dieser Beitrag behandelt nur Zahlenformate im Portal. Steuerliche Darstellung und Rechnungsinhalte sind ein anderes Thema.