Going from a String to a Number

by kirupa   |   13 November 2013

By design, strings deal with text-based things. Numbers deal with...um...numbers. For the most part, unless you are displaying some text that includes numerical data, you will never need to mix and match numbers and strings together. That would just be weird and possibly unnecessary:

normal and weird

Of course, this wouldn't be HTML if you didn't find yourself doing unnecessary or weird things all the time. There are many cases where something that should be a number is actually returned to you as a string. If you've ever worked with data returned from a web service, fiddled with setting or getting CSS property values, or fell into any other situation where the data you are working with isn't entirely under your control, you totally know what I am talking about.

In this short tutorial, you will learn some simple tricks on how to convert a string into a number so that you can do all sorts of number-ish things to it.

Onwards!

Meet parseInt

Let's start with a very contrived situation that drives the point across:

var numberOne = "45";
var numberTwo = 3;

alert(numberOne + numberTwo);

What do you think is going to be displayed when you add numberOne and numberTwo? Well, here is what gets displayed:

what gets displayed

This probably isn't what you wanted. This is because numberOne is a string and numberTwo is a number. In the world of JavaScript, the result of adding a string to a number is a string. What seems like a straightforward mathematical operation to us is a bizarre string addition (aka concatentation...as the cool kids say) to your browser. The scary part is how subtle this is.

The way you can fix this is by never finding yourself in this situation in the first place. When that isn't possible, you should convert the string into a number before you perform your addition. That is surprisingly easy to do thanks to the parseInt function. Below is a version of the above code where I revised our example to use parseInt to convert the 45 into a number before getting into the mathematical expression:

var numberOne = parseInt("45");
var numberTwo = 3;

alert(numberOne + numberTwo);

This time around, because both numberOne (thanks to parseInt) and numberTwo are numbers, the value you will see is 48.

Don't Forget About parseFloat!

Now, if the numerical string you are dealing with contains decimals, parseInt will convert that into an integer-based number. This means if you used parseInt on, let's say, 2.99, you will see a 2 as a result.  You probably don't want that. To help you preserve those extra digits of precision, you have the parseFloat function which works very similar to parseInt:

var itemOne = parseFloat("2.99");
var itemTwo = 4;
var total = 1.08 * (itemOne + itemTwo);

alert(total);

To use parseFloat, simply pass in the string that you want converted into a number whose representation is a float.

More Realistic Example Involving CSS Properties

Now that you've seen how to use parseInt and parseFloat using a pretty silly example, let's kick things up a few notches by looking at a situation where I had to use parseInt in real life!

Let's say you have an element with an id of mySquare whose width is set by the following style rule:

#mySquare {
	width: 250px;
	height: 250px;
	background-color: green;
}

What I wanted to do is increase the width of this element by 10 pixels. To handle that, here is the code that I had initially:

var myElement = document.querySelector("#mySquare");
var style = window.getComputedStyle(myElement);

// getting 250 and removing the "px" part of the value
var initialWidth = style.getPropertyValue("width").split("px")[0];

// adding 10 and tagging "px" back
var newWidth = initialWidth + 10 + "px";
myElement.style.width = newWidth;

alert(newWidth);

Can you guess what the value for newWidth would be in the end?

The answer wasn't 260px as I would have wanted. Instead, the answer turned out to be 25010px instead. The problem lies in the following line:

var myElement = document.querySelector("#mySquare");
var style = window.getComputedStyle(myElement);

// getting 250 and removing the "px" part of the value
var initialWidth = style.getPropertyValue("width").split("px")[0];

// adding 10 and tagging "px" back
var newWidth = initialWidth + 10 + "px";
myElement.style.width = newWidth;

alert(newWidth);

The value of initialWidth at this point is 250...in the form of a string! When I attempt to add 10 to this value, what you get is the equivalent of combining two strings together: 25010. The solution is to wrap the initialWidth variable into a parseInt function before using it as part of my addition:

var myElement = document.querySelector("#mySquare");
var style = window.getComputedStyle(myElement);

// getting 250 and removing the "px" part of the value
var initialWidth = style.getPropertyValue("width").split("px")[0];

// adding 10 and tagging "px" back
var newWidth = parseInt(initialWidth) + 10 + "px";
myElement.style.width = newWidth;

alert(newWidth);

Once I did this, the value for newWidth was what I expected it to be at 260. You can see another example of me using the parseInt function in an example where I display PHP data in a HTML page.

Wait, There's More!

If you thought the story with parseInt and parseFloat ended, then you are in for a surprise. These two functions along with some JavaScript quirks result in some pretty strange behavior that can only be explained by looking at examples:

// NaN
parseInt("foo");

// 200
parseInt("200 + 400 + 300");

// 200
parseInt("200abc")

// NaN
parseInt("abc200");

// 155
"15" + 5;

// 3
"15" / 5;

// 65
"15" * 5;

// 4
parseInt("4.55");

Some of the results make sense. Some of the results are a bit strange...like dividing or multiplying stringified numbers ends up converting the string into a number first. That is different from what you see with the + operator.

The Number Function

Besides parseInt and parseFloat, you also have the Number function that you can use to turn a string into a number:

Number("3.14") // 3.14 as a number

For normal numbers that don't involve any strings or other shenanigans, the the results you get with the Number function is identical to what you will see using parseInt or parseFloat. If the string you are trying to convert contains non-numerical data such as letters, then the Number function will fail:

Number("20px") // NaN

For this example, both parseInt and parseFloat will capture and return the 20 from the string. The Number function will return nothing. Which you want to use depends entirely on your scenario, but I often end up using parseFloat since the strings I convert often include text-based data.

Conclusion

JavaScript is a bit of a fuzzy language when it comes to clearly defining what you can and can't do when you put a string and a number together in the same room. Jumping between a string to a number (or vice-versa) is not a cheap operation. If you care about performance, you want to minimize how often you cross the string/number divide.

Thanks also to Axel Rauschmayer for reminding me about the Number function!

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!