Which is better?
I'm asking this just for the sake of shaving a few bytes, as I can use +x instead of number(x). Does parsefloat do something better?
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
For empty string, they are different.
Number("") returns 0, while
parseFloat("") returns NaN.
parseInt is for parsing a string, while
+ 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
NaN (not a number):
parseFloat('1x'); // => 1 Number('1x'); // => NaN
Number understands hexadecimal input while
parseFloat does not:
parseFloat('0x10'); // => 0 Number('0x10'); // => 16
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 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".
parseFloat parses "as much as it can". If called on the empty string
0 while parseFloat returns
Number("") === 0 // also holds for false isNaN(parseFloat("")) === true // and null isNaN(Number("32f")) === true parseFloat("32f") === 32
As far as I know, and this is only overheard from colleagues so might be entirely ill informed, that parseFloat is marginally faster.
Though on further researching, it would seem that this performance difference is browser dependant.
Have a look at these jsPerf results, and make you're call. (it includes +x tests as well)
As noted in @xdazz 's answer,
NaN so Again I would go with parseFloat, because an empty string does NOT mean the number 0, only a string with the character
"0" in it means 0;
©2020 All rights reserved.