Spaß mit Zahlen in JavaScript

Nein, ich werde keinen Videokanal zu diesem Thema starten. Aber ich möchte euch einige Dinge über Zahlen zeigen, die ihr vielleicht noch nicht kanntet. Die Antwort ist natürlich, wie wir alle wissen, 42.

Arten von Zahlen

Fangen wir mit den ganz grundlegenden Dingen an. Ihr wisst wahrscheinlich alle, dass es in JavaScript, wie in vielen anderen Programmiersprachen auch, Dezimalzahlen und Fließkommazahlen gibt. Aber intern sind alle vom Typ Number. Sie sind 64-Bit lang, was für den meisten Code ausreichen sollte. Wenn ihr aber wirklich mal große Zahlen benötigen, können ihr diese auch in einem BigInt speichern.

Einige weniger bekannte Zahlentypen

Nachdem wir nun wissen, dass alle (kleinen) Zahlen vom Typ Number sind, kennen wir nur einen Teil der Wahrheit. Wir können mehr als nur zwei Typen haben. Hier sind die zwei typischen Typen und einige weitere, von denen ihr vielleicht noch nie gehört oder die ihr in JavaScript noch nie verwendet habt:

42 // dezimal
42.0 // float
042 // oktal => 34 dezimal - da die Ziffern nach Null(en) am Anfang <= 8
099 // nicht oktal - dezimal 99, da die Ziffern nach Null(en) am Anfang > 8
0o42 // explizite oktale Zahl - mit kl. oder gr. lateinischen "o"
0x42 // hexadezimal => 66 dezimal - mit kl. oder gr. lateinischen "x"
0b101010 // binär 42, schöne Folge ;) - mit kl. oder gr. lateinischen "b"
0.042e3 // Exponentialzahl 42 - mit kl. oder gr. lateinischen "e"
42n // BigInt 42 - dezimal gefolgt von kl. lat. "n" auch für kleine Zahl

Vergleich von Zahlen

Wie wir bereits besprochen haben, sind, mit Ausnahme von BigInt, alle Zahlen vom gleichen Typ. Wenn man also die folgenden Zahlen vergleicht, sind das die Ergebnisse:

42 === 42.0 // true
042 === 42 // false
0o42 === 34 // true
042 === 34 // true
099 === 99 // true
0x42 === 66 // true
42 === 0b101010 // true
42 === 0.042e3 // true
42n === 42 // false
42n == 42 // true

Das letzte könnte (ein bisschen) unerwartet sein. Wenn Sie also eine BigInt mit einer anderen Zahl vergleichen möchtet, könnt ihr den „strengen Vergleichsoperator“ nicht verwenden, da die Zahlen von unterschiedlichem Typ sind.

Wenn ihr herausfinden wollt, ob eine Zahl eine ganze Zahl ist, können ihr eine Funktion aus dem Number Objekt verwenden:

Number.isInteger(42) // true
Number.isInteger(42.001) // false
Number.isInteger(42.0) // true
Number.isInteger(42.000000000000001) // true

Wie ihr seht, gibt diese Funktion true zurück, wenn es sich bei der Zahl um eine Ganzzahl oder eine Fließkommazahl mit einem Nachkommawert von 0 handelt – oder um einen wirklich kleinen Bruch. Leider gibt es keine ähnlichen Funktionen, um auf andere Zahlentypen zu prüfen.

Jetzt kommt der lustige Teil

Benötigen ihr sehr lange Zahlen in eurem Code? Dann werden ihr wahrscheinlich etwas erhalten, das wirklich schwer zu lesen ist. Aber es gibt einen netten kleinen Trick, um sie besser lesbar zu machen:

// Das ist eine riesige Zahl!
let rubiksCubeConfigurations = 43252003274489856000;
// Als String ist es einfacher zu lesen, aber das ist schlechter Code!
let sameNumberAsString = parseInt("43252003274489856000");
// Wie wäre es damit?
let easierToRead = 43_252_003_274_489_856_000;

Das ist doch schon besser lesbar, oder etwa nicht? Das Lustige daran ist, dass man einen Unterstrich an jeder beliebigen Stelle verwenden kann, nur nicht am Anfang oder Ende der Zahl, nicht nach einer führenden Null und nicht zwei Unterstriche hintereinander. Aber viele von uns werden sie wahrscheinlich wie oben gezeigt verwenden.

Bonus: Zahlen formatieren

Nachdem wir nun gesehen haben, wie man Zahlen im Code besser lesbar macht, hier noch ein Tipp, um sie für Menschen aus anderen Ländern leichter lesbar zu machen. In den USA würden wir eine Zahl wie folgt schreiben: „123,456.789“. Aber in Deutschland würde man „123.456,789“ schreiben. Wenn wir uns das Number Objekt noch einmal ansehen, finden wir die Funktion toLocaleString(), die wir wie folgt verwenden können:

const number = 1234567.89;
// German
console.log(number.toLocaleString("de")); // 1,234,567.89
// English (United States)
console.log(number.toLocaleString("en-US")); // 1,234,567.89
// Englisch (India)
console.log(number.toLocaleString("en-IN")); // 12,34,567.89
// Ukrainian
console.log(number.toLocaleString("uk")); // 1 234 567,89
// Dzongkha
console.log(number.toLocaleString("dz")); // ༡༢,༣༤,༥༦༧.༨༩

Hättet ihr gewusst, wie die Zahlen in den verschiedenen Sprachen formatiert werden? Und in manchen Sprachen gibt JavaScript sie sogar mit nicht-lateinischen Buchstaben aus. Die gleiche Funktion kann auch für die Formatierung von Währungen verwendet werden:

const costs = 123.4567;
// German with EUR
console.log(
    costs.toLocaleString("de-DE", { style: "currency", currency: "EUR" }),
); // 123,46 €

Fazit

Es gibt viele wirklich nützliche Tricks, um mit Zahlen in JavaScript umzugehen. Ich hoffe, es war auch etwas für auch dabei, das euch bei einem zukünftigen Projekt helfen wird. Ich kann auch empfehlen, sich die Dokumentation der anderen Funktionen und Eigenschaften des Number Objekts anzusehen.

Veröffentlicht von

Bernhard ist fest angestellter Webentwickler, entwickelt in seiner Freizeit Plugins, schreibt in seinem Blog über WordPress und andere Themen, treibt sich gerne bei den WP Meetups in Berlin und Potsdam herum und läuft nach Feierabend den ein oder anderen Halbmarathon.

Schreibe einen Kommentar

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