parseFloat()

parseFloat(string)

Returns number· Added in vES1· Updated June 2, 2026· Global Functions

javascriptparsefloatglobalconversionparsing

The parseFloat() function parses a string argument and returns a floating-point number. It differs from parseInt() in that it parses the entire decimal portion of the string rather than truncating at the first non-numeric character.

Syntax

parseFloat(string)

Parameters

Parameter	Type	Description
`string`	string	The value to parse. If not a string, it is converted to one first. Leading whitespace is ignored.

Return Value

The parsed floating-point number. If the first character cannot be converted to a number, NaN is returned.

Examples

Basic floating-point parsing

parseFloat("3.14");
// 3.14

parseFloat("  2.718  ");
// 2.718

parseFloat("3.14px");
// 3.14 (parses until invalid character)

Parsing integer-like strings

parseFloat() always returns a Number, not an integer type, so whole-number inputs come back unchanged. Adding a trailing .0 makes no difference — parseFloat('42.0') produces 42, the same as parseFloat('42'). The return value is still a Number, ready for arithmetic without any extra conversion step.

parseFloat("42");
// 42 (returned as number, not integer)

parseFloat("42.0");
// 42

Precision Behavior

parseFloat() preserves whatever precision the JavaScript Number type can hold, roughly 15 to 17 significant decimal digits. It does not round or truncate beyond what IEEE 754 floating-point naturally provides. The function also halts at the first non-numeric character after the decimal portion, so mixed expressions like '0.1 + 0.2' only capture the first operand rather the full expression.

parseFloat("0.1 + 0.2");
// 0.1 (stops at the first non-numeric character after the decimal)

parseFloat("3.14159265358979");
// 3.14159265358979

Invalid Input

When the string begins with something that cannot form any part of a number, parseFloat() returns NaN. An empty string or a whitespace-only string also produces NaN, unlike Number('') which returns 0. This distinction is important when parsing optional or user-supplied values — you can distinguish “no input” (NaN) from a genuine zero.

parseFloat("hello");
// NaN

parseFloat("");
// NaN (unlike Number() which returns 0)

parseFloat("   ");
// NaN

Differences from parseInt()

While both functions extract numeric values from strings, they handle decimal points very differently. parseInt() stops at the first non-digit character, treating the decimal point as a stop sign — parseInt('3.14') returns 3 because the . is not a digit. parseFloat() continues past the decimal point because it recognises the full floating-point representation, so parseFloat('3.14') returns 3.14. This is the core behavioural difference: one is integer-focused with radix support, the other is decimal-aware.

parseInt("3.14");
// 3 (decimal point stops parsing)

parseFloat("3.14");
// 3.14 (decimal point is included)

parseInt() also accepts an optional second argument — the radix — which lets you parse hexadecimal, octal, or binary strings directly. parseFloat() never takes a radix because it only understands decimal notation. That means you can call parseInt('ff', 16) to get 255, but parseFloat('ff') is always NaN. If you need non-decimal parsing, parseInt() is your only option of the two.

parseInt("ff", 16);
// 255

parseFloat("ff");
// NaN

Practical Examples

Reading CSS Values

One of the most common uses for parseFloat() is pulling numeric values out of CSS property strings. The function naturally strips unit identifiers like px, rem, or em, leaving only the number. This saves you from manually slicing the string or writing regex patterns when all you need is the numeric portion.

function getPixelValue(cssValue) {
  return parseFloat(cssValue);
}

getPixelValue("100.5px");
// 100.5

getPixelValue("2.5rem");
// 2.5

Processing user input

When you accept free-form user input for calculations, parseFloat() provides a forgiving starting point. It strips whitespace and ignores trailing text, so '10.5' and '10.5 pounds' both parse to the same number. Always validate the result with Number.isNaN() before using it in arithmetic — a completely non-numeric input will silently become NaN and propagate through your calculations if unchecked.

function sumInputs(input1, input2) {
  const num1 = parseFloat(input1);
  const num2 = parseFloat(input2);
  
  if (Number.isNaN(num1) || Number.isNaN(num2)) {
    return "Invalid number";
  }
  
  return num1 + num2;
}

sumInputs("10.5", "20.3");
// 30.8

sumInputs("abc", "5");
// "Invalid number"

How parseFloat() works

parseFloat() scans the string character by character, starting at the beginning. It skips leading whitespace, then reads as many characters as form a valid floating-point representation: an optional sign, digits, an optional decimal point, more digits, and an optional exponent (e or E followed by an integer). The moment it encounters a character that cannot be part of a floating-point number, it stops and returns the number parsed so far. If no valid numeric characters are found at all, it returns NaN.

parseFloat() vs Number()

Number(str) parses the entire string and returns NaN if any character is invalid. parseFloat(str) stops at the first invalid character and returns the number parsed up to that point. This makes parseFloat forgiving for strings with units or trailing text, while Number is strict.

Number('3.14px'); // NaN — the 'px' invalidates the whole thing
parseFloat('3.14px'); // 3.14 — stops at 'p'

Return value

parseFloat() returns a floating-point number, or NaN if the string cannot be converted. It reads the string character by character and stops at the first one that is not part of a valid number — so parseFloat('3.14px') returns 3.14, not NaN. If the entire string is non-numeric (parseFloat('abc')), the result is NaN. Use Number.isNaN() to test the return value, not the global isNaN(), which coerces its argument and can produce misleading results.

When parseFloat() is the better choice

parseFloat() is the better choice when you expect a decimal number at the start of a string and may need to ignore units or trailing labels. That makes it a good fit for CSS values, free-form user input, and data that comes from text files or form fields.

It is less strict than Number(), which can be helpful when you want to accept "12.5px" or "3.2rem" without writing extra substring logic first. Just remember that its permissive behavior is only useful when partial parsing is the goal.