String naar getal omzetten in JavaScript: vier methodes

Een waarde die je uit een formulierveld, een HTML-attribuut, een URL of een slecht getypeerd JSON-bestand haalt, komt altijd binnen als een string. Voor je ermee rekent, moet je ze omzetten naar een getal. JavaScript biedt daar vier manieren voor, en ze reageren niet allemaal hetzelfde op “42px”, “3,99” of een lege string. Hier lees je wat elke methode echt teruggeeft, gecontroleerd onder Node.js 22.

De vier methodes in één tabel

Er tekenen zich twee families af. parseInt en parseFloat extraheren: ze lezen de string vanaf het begin, stoppen bij het eerste teken dat geen cijfer is en geven terug wat ze gelezen hebben. Number() en de operator + converteren alles of niets: de hele string moet een getal voorstellen, anders is het NaN. Eén uitzondering die steekt: de lege string is voor hen 0.

parseInt() : het gehele getal aan het begin van de string

parseInt('42', 10);      // 42
parseInt('42px', 10);    // 42  : stopt bij de “p”
parseInt('3.99', 10);    // 3   : het decimale deel wordt genegeerd, niet afgerond
parseInt('  42  ', 10);  // 42  : spaties eromheen worden toegestaan
parseInt('abc', 10);     // NaN : geen cijfer aan het begin
parseInt('', 10);        // NaN

Het tweede argument is de base (of radix). Ze is 10 voor een decimaal getal, 16 voor hexadecimaal, 2 voor binair:

parseInt('ff', 16);   // 255
parseInt('101', 2);   // 5
parseInt('0x1f');     // 31 : zonder base zorgt het voorvoegsel 0x voor hexadecimaal
parseInt('08');       // 8  : moderne engines lezen “08” niet meer octaal

De base expliciet opschrijven, parseInt(s, 10), is sinds ES5 niet meer strikt nodig voor beginnullen, maar het blijft de goede gewoonte: ze maakt de bedoeling leesbaar en neutraliseert het geval 0x.

parseFloat() : het decimale getal aan het begin van de string

parseFloat('3.99');     // 3.99
parseFloat('12.5px');   // 12.5
parseFloat('.5');       // 0.5
parseFloat('1e3');      // 1000 : wetenschappelijke notatie wordt begrepen
parseFloat('3,99');     // 3    : de komma stopt het lezen
parseFloat('abc');      // NaN

parseFloat heeft geen base-argument: ze leest altijd decimaal. Dit is de functie om een maat uit een CSS-string (“12.5px”, “1.5rem”) of uit vrije tekst te halen.

Number() : de strikte conversie

Number('42');       // 42
Number('3.99');     // 3.99
Number('  42  ');   // 42  : spaties en regeleinden eromheen worden genegeerd
Number('42px');     // NaN : één teken te veel en alles mislukt
Number('');         // 0   : opgelet
Number(' ');        // 0   : idem
Number(null);       // 0
Number(undefined);  // NaN
Number(true);       // 1
Number('0x1f');     // 31  : hexadecimaal, binair (0b) en octaal (0o) met voorvoegsel worden geaccepteerd

Number() is de conversie die je wilt voor een waarde die een getal moet zijn en niets anders: een prijs, een hoeveelheid, een identifier. Heeft de gebruiker “12 euro” getypt, dan krijg je NaN en kun je dat melden, in plaats van ongemerkt met 12 te rekenen.

De unaire operator + : Number() in één teken

+'42';     // 42
+'';       // 0
+'abc';    // NaN
'42' * 1;  // 42  : vermenigvuldiging forceert ook de conversie
'42' - 0;  // 42
'3' + '4'; // '34' : optelling doet juist aan concatenatie!

De + vóór een waarde doet exact hetzelfde als Number(). Hij is kort, erg gangbaar in bestaande code, en makkelijk te missen bij het herlezen: +waarde lijkt op een typefout. In gedeelde code zegt Number(waarde) hetzelfde duidelijker. En gebruik nooit de binaire optelling om te converteren: '3' + '4' geeft de string '34'.

NaN correct afhandelen

NaN (Not a Number) is het resultaat van elke mislukte conversie. Hij heeft een verraderlijke eigenschap: hij is aan niets gelijk, zelfs niet aan zichzelf.

const n = Number('abc');

n === NaN;          // false, altijd
Number.isNaN(n);    // true  : de juiste manier om te testen
isNaN('abc');       // true  : maar isNaN converteert eerst zijn argument...
Number.isNaN('abc');// false : ... terwijl Number.isNaN alleen echte NaN-waarden test

Het gebruikelijke patroon: converteren, testen, een standaardwaarde toepassen of de fout melden.

function toNumber(valeur, defaut = 0) {
  const n = Number(String(valeur).trim());
  return Number.isNaN(n) ? defaut : n;
}

toNumber('42');    // 42
toNumber('42px');  // 0  (standaardwaarde)
toNumber('', 10);  // 0  : de lege string is 0, niet de standaardwaarde

De laatste regel herinnert aan de valkuil van de lege string: moet een leeg veld behandeld worden als “niet ingevuld”, test dat dan voor je converteert.

function toNumberStrict(valeur) {
  const s = String(valeur).trim();
  if (s === '') return NaN;
  return Number(s);
}

Het Franse geval: de decimale komma

Geen van de vier methodes begrijpt “12,5”. Number geeft NaN terug, parseFloat stopt bij de komma en geeft 12 terug, wat erger is: het programma gaat verder met een foute waarde. Normaliseer de invoer voor je converteert.

function parseFr(chaine) {
  const normalisee = String(chaine)
    .replace(/\s/g, '')   // verwijdert de duizendtalspaties: “1 234,56”
    .replace(',', '.');   // decimale komma -> punt
  return Number(normalisee);
}

parseFr('12,5');       // 12.5
parseFr('1 234,56');   // 1234.56
parseFr('12.5');       // 12.5 : de punt blijft geaccepteerd

In een formulier vermijdt <input type="number"> het probleem: de browser toont de Franse gebruiker een komma, maar geeft in value altijd een punt door.

Controleren of een string echt een getal is

Om te weten of een string een getal voorstelt voor je ze gebruikt, combineer je een strikte conversie met Number.isFinite, die NaN en Infinity afwijst.

function estNumerique(chaine) {
  const s = String(chaine).trim();
  return s !== '' && Number.isFinite(Number(s));
}

estNumerique('42');       // true
estNumerique('3.99');     // true
estNumerique('42px');     // false
estNumerique('');         // false
estNumerique('Infinity'); // false

En om na de conversie een geheel getal van een decimaal getal te onderscheiden: Number.isInteger(42) is true, Number.isInteger(3.99) is false.

Grote gehele getallen: wanneer Number niet meer volstaat

Number stelt gehele getallen exact voor tot 2⁵³ − 1 (9.007.199.254.740.991). Daarboven gaat de precisie zonder waarschuwing verloren: een 64-bits database-ID of een zeer hoog bedrag in centen kan daardoor fout gaan.

Number('9007199254740993');   // 9007199254740992 : het laatste cijfer is veranderd
BigInt('9007199254740993');   // 9007199254740993n : exact
Number.MAX_SAFE_INTEGER;      // 9007199254740991

BigInt laat zich niet mengen met Number in een berekening en accepteert geen decimalen, gebruik het alleen voor identifiers en echt grote gehele getallen.

Welke methode kies je?

• De waarde moet een getal zijn en niets anders (prijs, hoeveelheid, identifier): Number(), nadat je de lege string hebt uitgesloten.
• Je moet een getal uit tekst halen (“12.5px”, “3 artikelen”): parseFloat() voor een decimaal getal, parseInt(s, 10) voor een geheel getal.
• De invoer komt van een Franse gebruiker: normaliseer de komma en de spaties, en pas dan Number() toe.
• Je herleest code met +waarde: dat is Number(waarde). Behoud het als het team eraan gewend is, maar converteer nooit met de optelling '3' + '4'.
• In elk geval: test met Number.isNaN() of Number.isFinite() voor je rekent.

De omgekeerde bewerking, een getal omzetten naar een leesbare string met twee decimalen of een duizendtalscheiding, komt aan bod in Een getal formatteren in JavaScript. Voor de basis van de taal legt het hoofdstuk Variabelen en datatypes van de tutorial uit waarom een string en een getal twee aparte types zijn.