JavaScript parseInt parseFloat and Number Guide

JavaScript provides three functions for converting strings to numbers: parseInt, parseFloat, and Number. They differ in two ways: whether they tolerate extra characters after the number and whether they preserve decimal values.

javascript

console.log(parseInt("42px"));
console.log(parseFloat("3.14em"));
console.log(Number("42"));

The first prints 42 because parseInt extracts the integer and ignores "px". The second prints 3.14 because parseFloat preserves the decimal. The third prints 42 because the entire string is a valid number.

For understanding the Number type itself, including its limits and special values, see the guide to the JavaScript Number type. For an overview of all string and number methods, see the JavaScript string methods guide.

parseInt() -- extract an integer

parseInt reads a string from left to right and builds an integer until it hits a character that is not a valid digit. It ignores anything after that character.

javascript

console.log(parseInt("42px"));
console.log(parseInt("   99 bottles"));
console.log(parseInt("3.99"));

The first prints 42, stopping at "p". The second prints 99 because parseInt skips leading whitespace first. The third prints 3 because parseInt stops at the decimal point.

The second argument to parseInt is the radix, which is the numeric base. Always pass 10 for decimal:

javascript

console.log(parseInt("010"));
console.log(parseInt("010", 10));

Without the radix, older JavaScript engines might interpret strings starting with "0" as octal. The first line could print 8 on some engines. The second line always prints 10 because the radix 10 explicitly requests decimal.

Modern JavaScript defaults to base 10 for strings that start with "0", but explicitly passing 10 is still the safest practice and makes your intent clear.

If the string does not start with a digit, plus sign, or minus sign, parseInt returns NaN:

javascript

console.log(parseInt("abc123"));

parseFloat() -- extract a decimal

parseFloat works like parseInt but preserves the decimal point. It reads until it hits a character that cannot be part of a floating-point number.

javascript

console.log(parseFloat("3.14em"));
console.log(parseFloat("  6.022e23 molecules"));
console.log(parseFloat("12.34.56"));

The first prints 3.14. The second prints 6.022e+23 because parseFloat recognizes scientific notation. The third prints 12.34 because only the first decimal point is valid.

parseFloat takes only one argument. There is no radix parameter because floating-point numbers are always base 10.

Number() -- strict conversion

The Number function converts an entire string to a number. Unlike parseInt and parseFloat, it does not tolerate any trailing characters.

javascript

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

The first prints 42. The second prints 3.14. The third prints NaN because "42px" is not a valid number in its entirety. The fourth prints 0 because the empty string coerces to zero.

Number also converts booleans: Number(true) is 1 and Number(false) is 0.

Comparison table

Practical use cases

Extracting numeric values from CSS properties is a classic parseInt use case:

javascript

const width = "320px";
const numeric = parseInt(width, 10);
console.log(numeric + 20);

This prints 340. The "px" is stripped and you can do math with the result.

Parsing user input that may include units requires deciding whether to be strict or lenient:

javascript

function parseInput(value) {
  const num = Number(value);
  if (!Number.isNaN(num)) return num;
  return 0;
}
 
console.log(parseInput("42"));
console.log(parseInput("abc"));

The function returns 42 for valid input and 0 for invalid input. Using Number with Number.isNaN gives you strict validation. Using parseInt or parseFloat gives you lenient extraction.

For converting strings with commas or currency symbols, strip those characters first, then use Number:

javascript

const price = "$1,234.56";
const cleaned = price.replace(/[^0-9.]/g, "");
console.log(Number(cleaned));

Common mistakes

Forgetting the radix parameter on parseInt is the most common error. Always write parseInt(str, 10) to avoid octal interpretation surprises.

Using parseInt for decimals truncates the fractional part silently. The expression parseInt("3.99") returns 3, not 4. It does not round. Use parseFloat or Number for decimal values.

Expecting Number to extract a number from mixed text is incorrect. Number("42px") returns NaN. For lenient extraction, use parseInt or parseFloat.

Using parseInt on an empty string or a string with only whitespace returns NaN. The expression parseInt("") is NaN. If your input may be empty, handle that case explicitly before parsing.