Rundung von Zahlen in JavaScript: So erhalten Sie 2 Nachkommastellen (und nicht mehr)

Die Magie der Zahlen: Warum 0.1 + 0.2 nicht 0.3 ergibt?

Hallo, zukünftiger JavaScript-Guru! Wenn du jemals versucht hast, 0.1 und 0.2 in der Browserkonsole zu addieren, hast du höchstwahrscheinlich einen Kulturschock erlebt:

console.log(0.1 + 0.2); // Gibt aus: 0.30000000000000004

Ja, ja, JavaScript ist nicht verrückt geworden. Dies ist das Standardproblem der Gleitkomma-Arithmetik (IEEE 754). Computer können 0.1 einfach nicht perfekt im Binärsystem darstellen – das ist wie der Versuch, 1/3 im Dezimalsystem darzustellen. Es ergibt sich ein unendlicher Bruch.

Und hier taucht die klassische Frage von Stack Overflow auf, die tausende Aufrufe erhalten hat: „How to round to at most 2 decimal places, if necessary“. Wie gibt man eine Zahl schön aus, ohne den Schwanz aus „0000000004“? Wie rundet man auf zwei Stellen, aber nur wenn nötig?

In diesem Artikel werden wir ein Schritt-für-Schritt-Tutorial durchgehen, das das Problem ein für alle Mal löst. Du wirst erfahren, warum toFixed() manchmal lügt, wie Math.round() funktioniert und welche Methode du für einen Online-Shop, einen Taschenrechner oder einfach für die schöne Ausgabe eines Preises wählen solltest.

Problem: „Ich möchte 2 Stellen, aber nicht mehr!“

Stell dir vor, du schreibst einen Warenkorb. Der Preis eines Artikels ist 10.00. Du möchtest 10 anzeigen, nicht 10.00. Aber wenn der Preis 10.456 ist, möchtest du 10.46 anzeigen. Die Logik ist einfach: Wir runden auf zwei Stellen, aber entfernen überflüssige Nullen.

Die Standardmethode toFixed(2) macht Folgendes:

const price = 10;console.log(price.toFixed(2)); // "10.00" — aber wir brauchen "10"

const price2 = 10.456;console.log(price2.toFixed(2)); // "10.46" — das ist ok

Problem: toFixed() gibt immer einen String zurück und fügt immer Nullen hinzu. Das ist nicht geeignet.

Die zweite Nuance ist, dass toFixed() aufgrund desselben Gleitkommaproblems seltsam runden kann:

console.log((1.005).toFixed(2)); // "1.00" — aber es sollte "1.01" sein!

Bingo! Deshalb ist die Frage auf Stack Overflow so beliebt. Lass uns die Lösungen ansehen.

Lösung Nr. 1: Mathematisches Runden (Math.round)

Der zuverlässigste Weg ist, die Zahl mit 100 zu multiplizieren, zu runden und dann wieder zu dividieren. Das funktioniert so:

function roundToTwo(num) {  return Math.round(num * 100) / 100;}

console.log(roundToTwo(10.456)); // 10.46console.log(roundToTwo(10));     // 10console.log(roundToTwo(1.005)); // 1 — ups, schon wieder ein Problem

Siehst du? 1.005 * 100 = 100.49999999999999 (wegen IEEE 754). Math.round rundet dies ab, ergibt 100, geteilt durch 100 = 1. Nicht gut.

Fazit: Die Methode ist gut für einfache Fälle, aber nicht für Finanzberechnungen. Für Übungsbeispiele ist sie in Ordnung.

Lösung Nr. 2: Number.EPSILON — der Retter der Genauigkeit

Um den Gleitkommafehler zu besiegen, kann man ein winziges Delta hinzufügen — Number.EPSILON. Dies ist der minimale Unterschied zwischen zwei Zahlen, den JavaScript unterscheiden kann (ungefähr 2.2e-16).

function roundToTwo(num) {  return Math.round((num + Number.EPSILON) * 100) / 100;}

console.log(roundToTwo(1.005)); // 1.01 — funktioniert!console.log(roundToTwo(10.456)); // 10.46console.log(roundToTwo(10));     // 10

Warum funktioniert das? Wir schieben die Zahl ein kleines bisschen nach oben, sodass aus 100.4999... 100.5... wird und sie richtig gerundet wird.

Wichtig: Diese Methode ist nicht perfekt für alle Randfälle, aber für 99% der Aufgaben eine hervorragende Lösung. Genau das wird oft auf Stack Overflow empfohlen.

Lösung Nr. 3: toFixed() + Number() — ein cleverer Trick

Eine weitere beliebte Methode ist die Verwendung von toFixed(2) und anschließendes Zurückkonvertieren des Strings in eine Zahl mit Number() oder dem unären Plus +. Überflüssige Nullen werden da