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 type="number"> or
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.
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
- handle decimals (like
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.
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
hexadecimal numbers are prefixed with
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
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).
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
- Should only integers be allowed? (See
- 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
parseFloat are used.