Zahlen in JavaScript
Du weißt schon, dass ein Wert ein number sein kann. Diese Lektion bleibt bei genau diesem Typ: Zahlen schreiben, Alltag rechnen, Sonderwerte wie NaN und Infinity erkennen und eine saubere Dezimalzahl auf der Seite zeigen.
Wie funktionieren Zahlen in JavaScript?
Für Einsteiger teilen sich Ganzzahlen und Dezimalzahlen einen Typ: number. Schreib sie ohne Anführungszeichen — 42 und 3.5 sind Zahlen; "42" ist ein String. Du rechnest mit +, -, *, / und %. Manche Operationen liefern Sonderwerte: NaN („Not a Number“), wenn das Ergebnis keine brauchbare Zahl ist, und Infinity, wenn der Wert endliche Grenzen sprengt (z. B. Division durch Null). Für die Anzeige baut toFixed einen String mit gewählter Nachkommastellenanzahl.
Zahlen-Werkzeugkasten
📊 Zahlenwerkzeuge, die Einsteiger zuerst brauchen
| Idee | Beispiel | Ergebnis / Hinweis |
|---|---|---|
| Ganzzahl-Literal | let n = 10; |
Ganze Zahl, Typ number |
| Dezimal-Literal | let p = 2.5; |
Derselbe Typ number |
| Rechnung | 10 + 3, 10 % 3 |
Summe 13; Rest 1 |
| NaN | 0 / 0 oder unsinnige Rechnung |
„keine Zahl“ — typeof bleibt "number" |
| Infinity | 1 / 0 |
jenseits endlicher Grenzen |
toFixed |
(3.14159).toFixed(2) |
Anzeige-String "3.14" |
Zahlen ohne Anführungszeichen schreiben
Ganzzahl und Dezimal sind hier ein Typ. Ein separates „Integer-Typ“ brauchst du auf diesem Niveau nicht.
let score = 42;
let price = 9.99;
console.log(score);
console.log(price);
console.log(typeof score);
console.log(typeof price);
Alltag rechnen
Nutze +, -, *, / und % (Rest). Das Operatoren-Modul geht später tiefer; hier reicht zu sehen, dass Zahlen wirklich rechnen.
let a = 10;
let b = 3;
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);
NaN — keine brauchbare Zahl
NaN heißt: Das Ergebnis ist keine nutzbare Zahl. Merkwürdig: typeof NaN ist trotzdem "number". Sieht eine Rechnung kaputt aus, logge den Wert und prüfe auf NaN.
let broken = 0 / 0;
console.log(broken);
console.log(typeof broken);
Infinity
Division einer positiven Zahl durch Null ergibt Infinity (negativer Dividend: -Infinity). Das ist ein echtes Ergebnis der Engine — beim Debuggen gut zu kennen.
let huge = 1 / 0;
console.log(huge);
console.log(typeof huge);
Dezimalstellen mit toFixed formatieren
toFixed(n) liefert einen String mit n Nachkommastellen — praktisch für geldähnliche Anzeige. Merke: Das Ergebnis ist Text; rechne weiter mit der Originalzahl, nicht mit dem formatierten String.
let total = 19.999;
console.log(total.toFixed(2));
console.log(typeof total.toFixed(2));
Summe auf der Seite zeigen
Berechne eine Summe, formatiere sie bei Bedarf und setze den Text mit textContent in die Seite.
<!DOCTYPE html>
<html>
<head>
<title>Numbers — total on page</title>
</head>
<body>
<p id="out">…</p>
<script>
let price = 12.5;
let tax = 1.25;
let total = price + tax;
document.getElementById("out").textContent = "Total: " + total.toFixed(2);
</script>
</body>
</html>
Der Absatz zeigt eine Summe im Geldstil. Ändere price oder tax, lade neu und prüfe die Zeile.
Selbst ausprobieren
- Zwei
let-Zahlen anlegen (Ganzzahl und Dezimal); beide undtypeofloggen. - Für zwei kleine Zahlen
a + b,a * bunda % bloggen. 0 / 0loggen undNaNbestätigen.1 / 0loggen undInfinitybestätigen.toFixed(2)auf eine Dezimalzahl anwenden;typeofdes Ergebnisses ist"string".- Im HTML-Demo nur
priceodertaxändern, neu laden, neue Summe lesen.
Typische Fehler
let n = "10";und Zahlenrechnung erwarten — Anführungszeichen machen einen StringNaNignorieren, wenn die Konsole „leer“ oder seltsam wirkt- Sich über
Infinitynach Division durch Null wundern - Weiterrechnen mit einem
toFixed-Ergebnis (das ist ein String) - Einen eigenen Integer-Typ erwarten — Einsteiger haben einen number-Typ
Zusammenfassung
- Ganzzahl und Dezimal teilen den Typ number; ohne Anführungszeichen schreiben
- Für Alltag rechnen:
+,-,*,/und% - NaN und Infinity sind besondere Zahlenergebnisse
toFixedformatiert Dezimalstellen für die Anzeige und gibt einen String zurück- Als Nächstes: Strings — Textwerte genauer
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt