jsguides

Number.parseFloat()

Number.parseFloat(string)

Number.parseFloat() parses a string argument and returns a floating-point Number. It is the ES6-namespaced twin of the global parseFloat() — they are the same function reference:

Number.parseFloat === parseFloat; // true

The Number. prefix exists purely for modularization of globals, a pattern ES6 applied to parseInt, parseFloat, and several other top-level functions so code can opt into a namespaced style without behavior change. Pick whichever reads better; modern codebases tend to prefer the Number. form to pair naturally with Number.isNaN() and Number.isFinite().

Syntax

Number.parseFloat(string)

Parameters

string (any): The value to parse. Non-string values are coerced to a string first using the standard String(value) rule. Leading whitespace in the resulting string is ignored.

Return Value

A Number parsed from the longest valid numeric prefix of the string. If no prefix matches a valid numeric literal, the function returns NaN.

The grammar Number.parseFloat accepts is a subset of what the Number() constructor accepts:

  • Sign + / - allowed at the start, or after an exponent indicator.
  • Decimal digits 09, a single decimal point ., and one exponent e / E (with at least one digit before it).
  • The literal Infinity / -Infinity parses to Infinity / -Infinity.
  • No non-decimal prefixes (0x, 0b, 0o) are recognized.
  • Trailing invalid characters stop parsing but are silently dropped — the prefix is still returned as a number.

How Number.parseFloat() parses strings

Number.parseFloat walks the string from left to right and consumes as many characters as it can while the prefix still looks numeric. The moment it hits a character that cannot be part of a decimal literal, it stops and returns the number it has read so far. An empty prefix means NaN. A pure numeric string means the parsed value. A mixed string like "100.5abc" means the parsed prefix (100.5) with the trailing junk silently dropped.

// Walk-and-return-prefix in one expression
const parse = (s) => {
  const n = Number.parseFloat(s);
  return Number.isNaN(n) ? "no number" : n;
};

parse("3.14");     // 3.14
parse("3.14abc");  // 3.14
parse("abc3.14");  // "no number"
parse("");         // "no number"

This walk-and-stop behavior is what distinguishes Number.parseFloat from Number() (strict, returns NaN on any trailing junk) and from parseInt() (which truncates at the decimal point instead of keeping the fractional part). If you need either of those, use the right tool for the job; the parser here is intentionally the most forgiving of the three.

Examples

Basic parsing

The simplest cases show Number.parseFloat reading numeric text and stripping the whitespace around it. Non-string inputs are coerced through String() first, which is why a raw number literal still works without explicit conversion on your part.

Number.parseFloat("3.14");
// 3.14

Number.parseFloat("  2.718  ");
// 2.718 (leading whitespace ignored)

Number.parseFloat(42);
// 42 (number is coerced to string first)

Scientific notation

When numbers are written in scientific notation, like small values, large magnitudes, or anything that looks like 1e10, Number.parseFloat reads the mantissa and exponent together and returns the same decimal value the literal would represent if you typed it out by hand.

Number.parseFloat("314e-2");
// 3.14

Number.parseFloat("0.0314E+2");
// 3.14

Infinity and out-of-range values

Values that exceed the floating-point range are not errors here. They collapse to ±Infinity the same way arithmetic does. That is the behavior you want from a parser, but it does mean a parse “succeeded” even when the original magnitude was unrepresentable in IEEE 754.

Number.parseFloat("Infinity");
// Infinity

Number.parseFloat("-Infinity");
// -Infinity

Number.parseFloat("1.8e308");
// Infinity (above Number.MAX_VALUE)

Trailing garbage is ignored

This is the most important behavior difference from Number(). Number.parseFloat returns the longest still-valid prefix it can find; Number() returns NaN for the same input because it requires the whole string to match:

Number.parseFloat("100.5abc");
// 100.5

Number("100.5abc");
// NaN

That leniency is the reason parseFloat is the go-to choice when the source text is messy or partially numeric. Anywhere the first number is the only thing that matters (CSS values, version strings, log lines, user input), Number.parseFloat does the right thing without you writing a custom regex.

Non-decimal prefixes are not supported

Number.parseFloat("0x1A");
// 0 (stops at the "x" — hex prefix is ignored)

Number.parseFloat("0b10");
// 0

Number.parseFloat("0o10");
// 0

If you specifically need hex, binary, or octal parsing, reach for Number('0x1A') (which returns 26) or parseInt(string, 16). The trade-off is that those parsers stop at the first non-digit in the input, ignoring trailing units the same way Number.parseFloat does, so the prefix-leniency is shared.

NaN cases

Number.parseFloat returns NaN whenever the string starts with a character that cannot begin a numeric literal: letters other than e or E, the empty string, or values like true/false/null that do not coerce to a numeric shape. The rule of thumb is: a leading non-numeric character means no parse, full stop.

Number.parseFloat("FF2");
// NaN (no parseable number starts with "F")

Number.parseFloat("NaN");
// NaN (the string "NaN" is not a valid parseFloat literal)

Number.parseFloat("");
// NaN

Number.parseFloat(true);
// NaN (coerced from "true")

Practical: parse a CSS length value

A common use case is pulling a number out of a CSS length string like 14px or 1.5em. The function reads the numeric prefix, leaves the unit behind, and a Number.isNaN check cleanly handles values that contain no number at all (auto, inherit, or any other CSS keyword that does not begin with a digit).

function pxToNumber(value) {
  const n = Number.parseFloat(value);
  return Number.isNaN(n) ? 0 : n;
}

pxToNumber("14px");   // 14
pxToNumber("1.5em");  // 1.5
pxToNumber("auto");   // 0

Practical: sum numeric strings, skip junk

Another common pattern is summing user-entered numeric strings while silently skipping rows that did not parse. Pairing Number.parseFloat with Number.isNaN inside a reduce keeps the running total correct without throwing on bad input.

const totals = ["1.5", "2.25", "3.0", "oops"].reduce((sum, s) => {
  const n = Number.parseFloat(s);
  return Number.isNaN(n) ? sum : sum + n;
}, 0);
// 6.75

Number.parseFloat() vs Number() vs parseInt()

A quick reference for the three parsers on common inputs:

InputNumber.parseFloat(input)Number(input)parseInt(input)
"3.14"3.143.143
"3.14abc"3.14 (lenient)NaN (strict)3
" 42 "424242
""NaN0NaN
"0x1A"02626
"Infinity"InfinityInfinityNaN
trueNaN1NaN
[1]1 (from "1")11

Reach for Number.parseFloat when you want lenient, decimal-only parsing of mixed strings. Reach for Number() when you want strict conversion that rejects anything not a clean numeric literal. Reach for parseInt when you specifically need an integer.

Common Pitfalls

  • Trailing junk is accepted. Number.parseFloat("3.14xyz") returns 3.14, not NaN. If the rest of the string matters, validate it yourself or use Number().
  • No hex, binary, or octal prefixes. "0xFF" parses to 0. Pass a radix to parseInt or use Number() if you need those bases.
  • BigInts lose precision. Number.parseFloat(900719925474099267n) returns 900719925474099300 (the trailing n halts parsing, and the value is then re-coerced). Use Number(bigintValue) to preserve the value.
  • Comma decimal separators fail. Locale-formatted numbers like "1,5" parse to 1. Normalize "," to "." first if you are parsing European-style input.
  • Object inputs go through toString(). Number.parseFloat({ toString() { return "2.5"; } }) returns 2.5. This is rarely what you want — check the input type before parsing.
  • Out-of-range values collapse silently to ±Infinity. There is no error thrown; check with Number.isFinite() if the magnitude matters.

Browser Support

Number.parseFloat is widely available across all major browsers since September 2015. For older runtimes, the polyfill is a one-liner:

if (!Number.parseFloat) Number.parseFloat = parseFloat;

Conclusion

Number.parseFloat() is the lenient, decimal-only parser in the Number namespace. It returns the longest numeric prefix of its input, ignores trailing junk, and refuses anything that does not start with a sign, digit, or decimal point. Use it whenever the source text is messy and the first number is the only thing that matters; reach for Number() when you need strictness, or parseInt() when you need an integer.

See Also