The simplest way would be to use the native
var x = Number("1000")
If that doesn’t work for you, then there are the parseInt, unary plus, parseFloat with floor, and Math.round methods.
var x = parseInt("1000", 10); // you want to use radix 10 // so you get a decimal number even with a leading 0 and an old browser ([IE8, Firefox 20, Chrome 22 and older])
unary plus if your string is already in the form of an integer:
var x = +"1000";
if your string is or might be a float and you want an integer:
var x = Math.floor("1000.01"); //floor automatically converts string to number
or, if you’re going to be using Math.floor several times:
var floor = Math.floor; var x = floor("1000.01");
If you’re the type who forgets to put the radix in when you call parseInt, you can use parseFloat and round it however you like. Here I use floor.
var floor = Math.floor; var x = floor(parseFloat("1000.01"));
Interestingly, Math.round (like Math.floor) will do a string to number conversion, so if you want the number rounded (or if you have an integer in the string), this is a great way, maybe my favorite:
var round = Math.round; var x = round("1000"); //equivalent to round("1000",0)
var number = parseInt("10");
But there is a problem. If you try to convert “010” using parseInt function, it detects as octal number, and will return number 8. So, you need to specify a radix (from 2 to 36). In this case base 10.
var result = parseInt("010", 10) == 10; // Returns true var result = parseInt("010") == 10; // Returns false
parseInt ignores bad data after parsing anything valid.
This guid will parse as 51:
var result = parseInt('51e3daf6-b521-446a-9f5b-a1bb4d8bac36', 10) == 51; // Returns true
var parsed = parseInt("97", 10);
parseInt and parseFloat are the two functions used for parsing strings to numbers. Parsing will stop silently if it hits a character it doesn’t recognise, which can be useful for parsing strings like “92px”, but it’s also somewhat dangerous, since it won’t give you any kind of error on bad input, instead you’ll get back NaN unless the string starts with a number. Whitespace at the beginning of the string is ignored. Here’s an example of it doing something different to what you want, and giving no indication that anything went wrong:
var widgetsSold = parseInt("97,800", 10); // widgetsSold is now 97
It’s good practice to always specify the radix as the second argument. In older browsers, if the string started with a 0, it would be interpreted as octal if the radix wasn’t specified which took a lot of people by surprise. The behaviour for hexadecimal is triggered by having the string start with 0x if no radix is specified, e.g.
0xff. The standard actually changed with ecmascript 5, so modern browsers no longer trigger octal when there’s a leading 0 if no radix has been specified. parseInt understands radixes up to base 36, in which case both upper and lower case letters are treated as equivalent.
Changing the Type of a String to a Number
All of the other tricks mentioned above that don’t use parseInt, involve implicitly coercing the string into a number. I prefer to do this explicitly,
var cast = Number("97");
This has different behavior to the parse methods (although it still ignores whitespace). It’s more strict: if it doesn’t understand the whole of the string than it returns
NaN, so you can’t use it for strings like
97px. Since you want a primitive number rather than a Number wrapper object, make sure you don’t put
new in front of the Number function.
Obviously, converting to a Number gives you a value that might be a float rather than an integer, so if you want an integer, you need to modify it. There are a few ways of doing this:
var rounded = Math.floor(Number("97.654")); // other options are Math.ceil, Math.round var fixed = Number("97.654").toFixed(0); // rounded rather than truncated var bitwised = Number("97.654")|0; // do not use for large numbers
Any bitwise operator (here I’ve done a bitwise or, but you could also do double negation as in an earlier answer or a bitshift) will convert the value to a 32bit integer, and most of them will convert to a signed integer. Note that this will not do want you want for large integers. If the integer cannot be represented in 32bits, it will wrap.
~~"3000000000.654" === -1294967296 // This is the same as Number("3000000000.654")|0 "3000000000.654" >>> 0 === 3000000000 // unsigned right shift gives you an extra bit "300000000000.654" >>> 0 === 3647256576 // but still fails with larger numbers
To work correctly with larger numbers, you should use the rounding methods
Math.floor("3000000000.654") === 3000000000 // This is the same as Math.floor(Number("3000000000.654"))
Bear in mind that coeercion understands exponential notation and Infinity, so
200 rather than NaN, while the parse methods don’t.
It’s unlikely that either of these methods do exactly what you want. For example, usually I would want an error thrown if parsing fails, and I don’t need support for Infinity, exponentials or leading whitespace. Depending on your usecase, sometimes it makes sense to write a custom conversion function.
Always check that the output of Number or one of the parse methods is the sort of number you expect. You will almost certainly want to use
isNaN to make sure the number is not NaN (usually the only way you find out that the parse failed).
var x = "1000"*1;
Here is a little comparison of speed (Mac Os only)… 🙂
For chrome ‘plus’ and ‘mul’ are fastest (>700,000,00 op/sec), ‘Math.floor’ is slowest. For Firefox ‘plus’ is slowest (!) ‘mul’ is fastest (>900,000,000 op/sec). In Safari ‘parseInt’ is fastes, ‘number’ is slowest (but resulats are quite similar, >13,000,000 <31,000,000). So Safari for cast string to int is more than 10x slower than other browsers. So the winner is ‘mul‘ 🙂
I also test
var x = ~~"1000"; – on Chrome and Safari is a little bit slower than
var x = "1000"*1 (<1%), on Firefox is a little bit faster (<1%). I update above picture and test.
To convert a String into Integer, I recommend using parseFloat and NOT parseInt. Here’s why:
parseFloat('2.34cms') //Output: 2.34 parseFloat('12.5') //Output: 12.5 parseFloat('012.3') //Output: 12.3
parseInt('2.34cms') //Output: 2 parseInt('12.5') //Output: 12 parseInt('012.3') //Output: 12
So if you have noticed parseInt discards the values after the decimals, whereas parseFloat lets you work with floating point numbers and hence more suitable if you want to retain the values after decimals. Use parseInt if and only if you are sure that you want the integer value.