JavaScript Numbers & Math

JavaScript parseInt and parseFloat

Written by Swapnil RajaPublished 24 Aug 2026

parseInt and parseFloat read a number from the start of a string.

Unlike Number, they ignore whatever follows the number.

That is sometimes helpful and sometimes a trap.

Example

javascript

console.log(parseInt("42px"));
console.log(Number("42px"));

The output is 42 then NaN.

parseInt stopped at the first character it could not use.

How They Differ from Number

Number requires the whole string to be a number.

parseInt reads as far as it can and stops.

parseFloat does the same but keeps the decimal part.

Syntax

javascript

parseInt(text, 10);
parseFloat(text);

Always pass 10 as the second argument to parseInt.

Whole Numbers Only

parseInt throws away everything after the decimal point.

Example

javascript

console.log(parseInt("3.9"));
console.log(parseFloat("3.9"));

It truncates rather than rounding.

Reading CSS Values

This is the classic use: a measurement with a unit attached.

Example

javascript

const width = "250px";

console.log(parseInt(width, 10) + 50);

The output is 300.

The Radix Argument

The second argument says which base the text is in.

Passing 10 makes the behaviour explicit and predictable.

Example

javascript

console.log(parseInt("ff", 16));
console.log(parseInt("101", 2));
console.log(parseInt("08", 10));

The output is 255, 5, 8.

When Nothing Can Be Read

If the string does not start with a number, the result is NaN.

Example

javascript

console.log(parseInt("hello"));
console.log(parseInt("12abc"));
console.log(parseInt(""));

Only text starting with a digit produces a number.

Which One to Use

Use Number when the whole string should be a number, such as form input.

Use parseInt when you deliberately want to ignore a suffix.

Example

javascript

const entered = "42abc";

console.log(Number.isNaN(Number(entered)) ? "rejected" : "accepted");
console.log(parseInt(entered, 10));

Number is stricter, which is usually safer for validation.

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript parseInt</title>
</head>
<body>

  <h1>parseInt and parseFloat</h1>

  <p id="out"></p>

  <script>
    const width = "250px";
    const price = "19.99 pounds";

    document.getElementById("out").innerHTML =
      "Width plus 50: " + (parseInt(width, 10) + 50) +
      "<br>Price: " + parseFloat(price) +
      "<br>Number would give: " + Number(width);
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try leading text:

Change the width to "px250" and see NaN appear.

Important Points

parseInt reads a number from the start of a string.
Number requires the whole string to be numeric.
parseInt truncates decimals; parseFloat keeps them.
Always pass a radix of 10.
Text not starting with a digit gives NaN.

Conclusion

These two are for pulling a number out of text that has more in it.

For validating input, Number is the stricter and safer choice.

The radix argument costs nothing and removes all ambiguity.

PreviousJavaScript Number Methods NextJavaScript Number Precision