How do parseInt()
and Number()
behave differently when converting strings to numbers?
11 Answers
Well, they are semantically different, the Number
constructor called as a function performs type conversion and parseInt
performs parsing, e.g.:
// parsing:
parseInt("20px"); // 20
parseInt("10100", 2); // 20
parseInt("2e1"); // 2
// type conversion
Number("20px"); // NaN
Number("2e1"); // 20, exponential notation
Also parseInt
will ignore trailing characters that don't correspond with any digit of the currently used base.
The Number
constructor doesn't detect implicit octals, but can detect the explicit octal notation:
Number("010"); // 10
Number("0o10") // 8, explicit octal
parseInt("010"); // 8, implicit octal
parseInt("010", 10); // 10, decimal radix used
And it can handle numbers in hexadecimal notation, just like parseInt
:
Number("0xF"); // 15
parseInt("0xF"); //15
In addition, a widely used construct to perform Numeric type conversion, is the Unary +
Operator (p. 72), it is equivalent to using the Number
constructor as a function:
+"2e1"; // 20
+"0xF"; // 15
+"010"; // 10
-
1Interesting, does parseInt ignore any characters trailing the number? Because in my case I would prefer getting a NaN instead of the 20 when converting.– MarkNov 3, 2010 at 18:59
-
-
2Thank you for this. This is the first time I've seen NaN. It may be helpful for some folks to know that NaN is tested with the function isNaN ( value ). Just using "if ( value == NaN )", for example, won't work. May 4, 2013 at 9:54
-
2
Number()
does deal with octals much like hex and binary:Number('0o10') == 8
Sep 21, 2016 at 13:32 -
4
typeof parseInt("123") => number
typeof Number("123") => number
typeof new Number("123") => object (Number primitive wrapper object)
first two will give you better performance as it returns a primitive instead of an object.
-
24
-
9Also
new Number("1") != new Number("1")
. NEVER USEnew Number
. Never never never never.Number("1")
, on the other hand, is perfectly reasonable. Dec 28, 2011 at 5:13 -
26@Kragen, it'd be much more beneficial to the community if you explained WHY you shouldn't use "new Number" -- instead of just typing "never" 5 times...– kenSep 18, 2012 at 14:22
-
3@ken Very old comment but for future visitors I imagine its because exactly the reason they mentioned to begin with. I parse two numbers
let x = new Number("2"); let y = new Number("2");
and then later on do an equality check for whatever reason,if (x == y) { doSomething(); }
logicallydoSomething
should be called. But it wont. Also if you were to parse only one numberlet x = new Number("2");
thenx === 2
would be false. That is a clear reason why you should not usenew Number
– Tom COct 17, 2017 at 14:11 -
2@TomC You're seeing the result of an edited comment (that's what the pencil icon following the comment denotes); previously there was zero explanation, just strong admonition.– kenOct 18, 2017 at 16:57
Summary:
parseInt()
:
- Takes a string as a first argument, the radix (An integer which is the base of a numeral system e.g. decimal 10 or binary 2) as a second argument
- The function returns a integer number, if the first character cannot be converted to a number
NaN
will be returned. - If the
parseInt()
function encounters a non numerical value, it will cut off the rest of input string and only parse the part until the non numerical value. - If the radix is
undefined
or 0, JS will assume the following:- If the input string begins with "0x" or "0X", the radix is 16 (hexadecimal), the remainder of the string is parsed into a number.
- If the input value begins with a 0 the radix can be either 8 (octal) or 10 (decimal). Which radix is chosen is depending on JS engine implementation.
ES5
specifies that 10 should be used then. However, this is not supported by all browsers, therefore always specify radix if your numbers can begin with a 0. - If the input value begins with any number, the radix will be 10
Number()
:
- The
Number()
constructor can convert any argument input into a number. If theNumber()
constructor cannot convert the input into a number,NaN
will be returned. - The
Number()
constructor can also handle hexadecimal number, they have to start with0x
.
Example:
console.log(parseInt('0xF', 16)); // 15
// z is no number, it will only evaluate 0xF, therefore 15 is logged
console.log(parseInt('0xFz123', 16));
// because the radix is 10, A is considered a letter not a number (like in Hexadecimal)
// Therefore, A will be cut off the string and 10 is logged
console.log(parseInt('10A', 10)); // 10
// first character isnot a number, therefore parseInt will return NaN
console.log(parseInt('a1213', 10));
console.log('\n');
// start with 0X, therefore Number will interpret it as a hexadecimal value
console.log(Number('0x11'));
// Cannot be converted to a number, NaN will be returned, notice that
// the number constructor will not cut off a non number part like parseInt does
console.log(Number('123A'));
// scientific notation is allowed
console.log(Number('152e-1')); // 15.21
If you are looking for performance then probably best results you'll get with bitwise right shift "10">>0
. Also multiply ("10" * 1
) or not not (~~"10"
). All of them are much faster of Number
and parseInt
.
They even have "feature" returning 0 for not number argument.
Here are Performance tests.
-
1The speed of the various approaches appears to change with browser revisions over time. The linked test also has changed, and the latest version as of this comment is here - jsperf.com/number-vs-parseint-vs-plus/39 - fortunately the site contains previous versions of the test as well Aug 4, 2014 at 16:01
-
@bobo, sure. Out of curiosity checked with chrome -
Number
andparseInt
still slower 99% than the rest. Plus to me they are less attractive visually too :-)– SauliusAug 5, 2014 at 12:19 -
30Always prefer code clarity over "useless" optimizations. For most use cases
parseInt
orNumber
are more preferable. If you are programming a N64 emulator with millions of conversions per seconds, you might consider those tricks.– ngrymanMay 20, 2015 at 12:10 -
1Question is about behavior, discussion of performance is off-topic. Jun 9, 2017 at 22:37
-
1Note that this can't be used for large integers -- specifically integers that don't fit in a signed 32-bit integer -- because in JavaScript, bitwise operators treat their operands as a sequence of 32 bits, rather than as decimal, hexadecimal, or octal numbers. Hence
(2**31).toString() >> 0
will overflow to-2147483648
. You can use>>>
instead of>>
to have JavaScript treat the operand as an unsigned 32-bit integer, but then any numbers larger than2**32 - 1
will also overflow.– hascMay 16, 2019 at 11:12
One minor difference is what they convert of undefined
or null
,
Number() Or Number(null) // returns 0
while
parseInt() Or parseInt(null) // returns NaN
-
That’s because ToNumber (null) is specified to return
0
.parseInt
, however expects strings, sonull
andundefined
are coerced to the strings"null"
or"undefined"
, respectively, first, which don’t start with digits.Number(undefined)
isNaN
, not0
, which is a special step of theNumber(
…)
algorithm. At any rate, the question asked about “when converting strings to numbers”, not about these special cases. Mar 16, 2021 at 6:38
I found two links of performance compare among several ways of converting string
to int
.
parseInt(str,10)
parseFloat(str)
str << 0
+str
str*1
str-0
Number(str)
parseInt()
-> Parses a number to specified redix.
Number()
-> Converts the specified value to its numeric equivalent or NaN if it fails to do so.
Hence for converting some non-numeric value to number we should always use Number() function.
eg.
Number("")//0
parseInt("")//NaN
Number("123")//123
parseInt("123")//123
Number("123ac") //NaN,as it is a non numeric string
parsInt("123ac") //123,it parse decimal number outof string
Number(true)//1
parseInt(true) //NaN
There are various corner case to parseInt()
functions as it does redix conversion, hence we should avoid using parseInt() function for coersion purposes.
Now, to check weather the provided value is Numeric or not,we should use nativeisNaN()
function
I always use parseInt, but beware of leading zeroes that will force it into octal mode.
-
38I think it's always a good idea to supply a radix to
parseInt(value, radix)
that way you don't have accidental octal mode conversions, etc.– awesomoNov 3, 2010 at 18:59 -
Leading zeroes will force it into octal mode in ECMAScript 3. ECMAScript 5 will parse it to
0
, even in non-strict mode. But this has been fixed and now leading zeroes are just ignored, soparseInt("070")
would become70
. Sep 20, 2016 at 10:28 -
3You should be using a linter as well that will warn you to provide a radix value into
parseInt()
.– JustinOct 14, 2016 at 0:42
It's a good idea to stay away from parseInt and use Number and Math.round unless you need hex or octal. Both can use strings. Why stay away from it?
parseInt(0.001, 10)
0
parseInt(-0.0000000001, 10)
-1
parseInt(0.0000000001, 10)
1
parseInt(4000000000000000000000, 10)
4
It completely butchers really large or really small numbers. Oddly enough it works normally if these inputs are a string.
parseInt("-0.0000000001", 10)
0
parseInt("0.0000000001", 10)
0
parseInt("4000000000000000000000", 10)
4e+21
Instead of risking hard to find bugs with this and the other gotchas people mentioned, I would just avoid parseInt
unless you need to parse something other than base 10. Number
, Math.round
, Math.floor
, and .toFixed(0)
can all do the same things parseInt
can be used for without having these types of bugs.
If you really want or need to use parseInt for some of it's other qualities, never use it to convert floats to ints.
-
1Wow, this is really useful! Bugs from parseInt could be hard to find indeed. Your answer deserves many more upvotes!– James DOct 14, 2020 at 3:40
-
6That’s because
parseInt
expects strings. Any non-string is first coerced to a string. Since4000000000000000000000
is not a safe integer, its string representation is4e+21
, andparseInt
’s left-to-right parsing stops before the non-digite
. UsingparseInt
with numeric arguments or to round a number is a misuse. Mar 16, 2021 at 6:56
parseInt converts to a integer number, that is, it strips decimals. Number does not convert to integer.
-
Just for fun it seems that e.g.
Number("10.0")
does return10
, butNumber("10.1")
returns10.1
. So, that's a fun special case to watch out for. Aug 4, 2021 at 16:01
Another way to get the result is to use the ~ operator
For most circumstances
~~someThing === parseInt(something)
but ~~ will return zero for strings that parseInt will accept with trailing other characters or with the number base spec (eg hex) and will also return zero when parseInt returns NaN. Another difference is that ~~ if given a bigint returns a bigint to which you can add another bigint whereas parseInt returns an ordinary floating point number (yes really - it gives exactly the same value as parseFloat) if the bigint is large
However for most circumstances ~~ is 30% faster than parseInt. It is only slower by 10% when something is a floating point represented as a string.
So if the more restricted scope of ~~ fits your need then save the computer time and give yourself less to type
parseFloat
vsNumber
since all numbers are 64-bit floats. Related: stackoverflow.com/q/12227594/4294399