parseFloat vs Number: What's the Difference?

Parsing numeric inputs is a task that comes up frequently when creating web applications. Typically, it comes up when we need to obtain a number from some text that represents a number, often specified by the user via an <input> tag like <input type="number"> or <input type="text">.

parseFloat and Number are two of the most common ways to accomplish this task, but the differences between them are nuanced, so let's see how they are similar and how they differ.

Contents

• What's the Same
• What's Different
  • parseFloat: Stops When Input Stops Making Sense
  • Number: Parses Hexadecimal and Binary
  • Number: Parses Whitespace and Booleans as Numbers
  • Example Inputs and Outputs
• Conclusion

What's the Same

At a glance, both parseFloat and the Number constructor generally do the same thing. They can each:

• produce numbers from values
• handle exponents (like 4.5e3)
• handle decimals (like -9.8)

If the input is strongly validated already to ensure that there's nothing radical (like NaN, non-number types, etc.) then you will not likely not see much of a difference between the two functions. Where it gets interesting though is how each of these functions handles more exotic inputs.

What's Different

parseFloat: Stops When Input Stops Making Sense

parseFloat will only parse an input up to the point where it stops making sense, and return that number. For example, numbers with units after the number can be parsed because the number comes before the unit:

parseFloat("3px"); // => 3
parseFloat("9,59 €"); // => 9

On the other hand, Number will try to parse the whole value as a number, including any text:

Number("3px"); // => NaN
Number("9,59 €"); // => NaN

Number: Parses Hexadecimal and Binary

In addition to parsing decimal numbers (base 10), the Number constructor can also parse binary (base 2), octal (base 8), and hexadecimal (base 16) numbers. Binary numbers are prefixed with 0b, octal numbers are prefixed with 0o, and hexadecimal numbers are prefixed with 0x.

Number("101"); // => 101
Number("0b101"); // => 5
Number("0o101"); // => 65
Number("0x101"); // => 257

parseFloat doesn't parse binary, octal, or hexadecimal numbers:

parseFloat("101"); // => 101
parseFloat("0b101"); // => 0
parseFloat("0o101"); // => 0
parseFloat("0x101"); // => 0

Number: Parses Whitespace and Booleans as Numbers

The Number constructor treats whitespace as an acceptable input and will return a number. If there is a number contained within the whitespace, it will be parsed and returned.

Number(""); // => 0
Number("\n"); // => 0
Number("\t"); // => 0
Number("\t501\n"); // => 501

parseFloat will not accept whitespace as an acceptable input, unless it contains a number.

parseFloat(""); // => NaN
parseFloat("\n"); // => NaN
parseFloat("\t"); // => NaN
parseFloat("\t501\n"); // => 501

In addition to whitespace, Number will also parse booleans as numbers, whereas parseFloat will not.

Number(true); // => 1
parseFloat(true); // => NaN

Example Inputs and Outputs

To illustrate the similarities and differences above, I've computed some typical and atypical inputs and listed the outputs for both parseFloat and Number.

Conclusion

Both parseFloat and Number can produce numbers from typical strings that represent numbers, but both have some caveats which have to be handled regardless of which you choose, such as parsing non-numeric inputs (like booleans, objects, arrays), as well as atypical inputs (like octal numbers and whitespace).

However, neither parseFloat nor Number will pass judgement on what constitutes a "valid" number. Any implementation that uses one of these functions should consider the following and validate accordingly:

• Should only finite numbers be allowed? (See Number.isFinite)
• Should only integers be allowed? (See Number.isInteger)
• Should non-decimal numbers be allowed?

In general though, Number is a good default choice to use for parsing numbers. Ultimately, any number parsing code should be thoroughly tested to ensure it works as expected, regardless of whether Number or parseFloat are used.