The difference between parseFloat and Number
parseFloat
/parseInt
is for parsing a string, while Number
/+
is for coercing a value to a number. They behave differently. But first let’s look at where they behave the same:
parseFloat('3'); // => 3
Number('3'); // => 3
parseFloat('1.501'); // => 1.501
Number('1.501'); // => 1.501
parseFloat('1e10'); // => 10000000000
Number('1e10'); // => 10000000000
So as long as you have standard numeric input, there’s no difference. However, if your input starts with a number and then contains other characters, parseFloat
truncates the number out of the string, while Number
gives NaN
(not a number):
parseFloat('1x'); // => 1
Number('1x'); // => NaN
In addition, Number
understands hexadecimal input while parseFloat
does not:
parseFloat('0x10'); // => 0
Number('0x10'); // => 16
But Number
acts weird with empty strings or strings containing only white space:
parseFloat(''); // => NaN
Number(''); // => 0
parseFloat(' \r\n\t'); // => NaN
Number(' \r\n\t'); // => 0
On the whole, I find Number
to be more reasonable, so I almost always use Number
personally (and you’ll find that a lot of the internal JavaScript functions use Number
as well). If someone types '1x'
I prefer to show an error rather than treat it as if they had typed '1'
. The only time I really make an exception is when I am converting a style to a number, in which case parseFloat
is helpful because styles come in a form like '3px'
, in which case I want to drop the 'px'
part and just get the 3
, so I find parseFloat
helpful here. But really which one you choose is up to you and which forms of input you want to accept.
Note that using the unary +
operator is exactly the same as using Number
as a function:
Number('0x10'); // => 16
+'0x10'; // => 16
Number('10x'); // => NaN
+'10x'; // => NaN
Number('40'); // => 40
+'40'; // => 40
So I usually just use +
for short. As long as you know what it does, I find it easy to read.