How do I convert a String to a Number in JavaScript?

Variables in JavaScript are not strongly typed.  So if I have a variable named x:

       var x;

I can assign anything I want to it:

       X = 4; // legal

       X = “a string”;  // also legal

       X = {width: 45, height: 30};  // still legal

This can be nice at times… but if we aren't careful it can also introduce bugs.  For instance:

       var width = “3”;

       width += 7;

       // width now equals “37”, not 10

Cases like this require us to first convert the string to a number.  There are three methods of doing this which I will discuss:

• The unary + operator
• The global function parseInt()
• The global function parseFloat()

If you know the string you are converting only represents a number (e.g. “3” or “5.9”, not “34px”) you can use the unary + operator.  Simply place a “+” right before string, and you now have a number.  Example:

       var width = “3”;

       var height = 9;

       var area = height * (+width);

       // area now equals 27

Note that you are not adding anything to the variable (that would be a binary operator), you are simply making it a number.  Again, this only works with a string that represents a number.  The following will give NaN (not a number):

       var width = +“5px”;

       // width now equals NaN

So, what to do with “5px”?  Do we have to remove the non-numeric characters first?  Nope.  The parseInt function helps us out here.  It will return an integer based on the first number it finds.  So the previous failure would now look like this:

       var width = parseInt(“5px”);

       // width now equals 5

The non-numeric characters after the number are ignored.  Note that non-numeric characters found before the number will cause a NaN to be returned.   Example:

       var width = parseInt(“w 5px”);

       // width now equals NaN

FYI, you can also pass a second parameter to the function which is the radix of the first argument.  Example:

       var x = parseInt("10010", 2);

       // x now equals 18

This works great, but what if we want a floating point number?  The global function parseFloat will do very similar work, returning a floating point number instead.  Example:

       var pi = parseFloat(“3.14”);

       // pi now equals 3.14

The same rules apply about having characters before and after as do to the parseInt function. 

       var pi = parseFloat(“3.14 degrees”);

       // pi now equals 3.14

       var pi = parseFloat(“x 3.14 degrees”);

       // pi now equals NaN

The parseFloat function can also take a string in scientific notation:

       var x = parseFloat("3.14e5");

       x now equals 314000

Finally a quick way of converting back to a String is as follows:

       var score = String(3722);

       // score now is a string of “3722”

       var label = “Your high score is “ + score;

As this demonstrates, conversion to a String is not needed as frequently because any time we add a string to a number… we get a string concatenation not a numeric addition. 

Bonus material:

There are two more global functions which may be helpful in some cases:

       isNaN()

       isFinite()

isNaN() will return true if the variable currently is NaN (not a number).  isFinite() will return false if the argument passed in is positive infinity, negative infinity, or NaN. 

   // will return true (because x is 3)
   isFinite(3 / 1);  

   // will return false (because x is positive infinity)
   isFinite(3 / 0);  

   // will return false
   isNaN(4);  

   // will still return false because
   // “4” can easily be converted to a number
   isNaN(“4”);  
   // will return true because the string can’t 
   // be easily converted to a number.

   isNaN(“4px”);