Parsing Strings to Integers

How to use Number.parseInt and Number primitive wrapper object to parse strings to integers.

Transcript

In web development, it’s very common for us to need to parse strings into integers. Some use cases for that might be if you’re dealing with a form, a querystring parameter in the url, a prompt, or html attributes that exist on the elements themselves. When we need to parse an integer there’s a few peculiarities we need to keep in mind in how JavaScript will parse these integers and and what our options are.

So the first option we’re going to look at is parsing ints through the parseInt function and the parseInt function exists as both a global function as well as a method on the Number primitive wrapper object or the the Number global object. When we’re parsing the int, numbers can exist in a couple different forms depending on whether they’re representing a hexadecimal number or a binary number or maybe an octal number.

So when we look at a string that has a “0x” in the front, when we use parseInt there’s two arguments we need to pass in. The first one is the string itself and then the second one is the radix. If we do parseInt and then some value you know there’s an optional parameter here where we can specify the base of the number. If we were to parseInt with 0x16 the radix would default to 16 because the string is a hexadecimal representation of the number. If one is not provided, in older browsers, the radix could either be 8 or 10 and it was implementation specific. So a best practice was always to specify the the radix that you wanted to use just so you didn’t leave it to chance depending on the user’s browser. But starting with ES5 the 10 is the default radix when we use parseInt so it will always assume it is a decimal number. When we pass in a string that has white space either on the left or the right when it’s coercing then when it’s parsing through this string it will trim off the white space on either end and parse the integer correctly. If there’s a leading zero it will trim that as well. If we pass in a string that has a integer component in the front, such as in this case maybe the string representation of 15 pixels, it will parse up to the first non-numeral digit that’s not also specified by the radix right. So recall up here with this 0x16 you know it continued to parse this string because x is one of the non-numeral characters that it will include as part of the parsing. So here you can see it got up to the “p” from pixels and then it stopped parsing and gave us the value of 15. This behaves mostly how you expect, I think the the one point that could trip you up is that if you have a kind of garbled string that gets passed in here and it happens to start with a few integers you know it may parse it in a way that you may not be expecting. You may expect it to throw an error but it will try its best to parse it and in some cases that may give you some undefined behavior.

So our other option here is to use the Number function. This Number primitive wrapper object also provides a function which we can use to parse out strings into their integers or in this case we can parse them out to any representation here so you know in this case we have 0x16 which again is another hexadecimal number you know which evaluates to 17. But if we give it the same pixel notation that we used up here we’ll see that the number will actually parse out to “NaN” which stands for “not a number”. So if there’s any non-numeral non-radix characters present in the string it won’t parse it’ll return not a number and then in our code if we want to check to see if it was evaluated to a number or not there is this global isNaN function and there’s an associated method here on the Number object as well that we can use and so there’s lots more when we look at parsing numbers in javascript that for instance there’s a parseFloat function that we could use.

So there’s definitely a lot to explore here but hopefully this will give you a good introduction so that if you run into one of these scenarios where you know you need to parse through an html html attribute or a form value that this will give you the tools that you need.