Which is better, number(x) or parseFloat(x)?
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.
The difference is what happens when the input is not a "proper number". Number
returns NaN
while parseFloat
parses "as much as it can". If called on the empty string Number
returns 0
while parseFloat returns NaN
.
For example:
Number("") === 0 // also holds for false
isNaN(parseFloat("")) === true // and null
isNaN(Number("32f")) === true
parseFloat("32f") === 32
In these examples you can see the difference:
Number('') = 0;
Number(false) = 0;
Number('1a') = NaN;
parseFloat('') = NaN;
parseFloat(false) = NaN;
parseFloat('1a') = 1;
parseFloat is a bit slower because it searches for first appearance of a number in a string, while the Number constuctor creates a new number instance from strings that contains numeric values with whitespace or that contains false values.
P.S. If you are interested in some universal type conversion solutions you can read the post about type conversion in my blog: http://justsimplejs.blogspot.com/2012/08/data-type-conversion.html