Data Conversions | Inside JavaScript

Strings are not the same as numbers in JavaScript. If you store the number 5 in a variable, that's not the same as storing the string "5" in a variable. The string "5" is a string, just like the string "Now is the time!"

This means that if you've stored the string "5" in a variable myStringValue , as follows , you should remember that it's stored as text:

 var myStringValue = "5"

If you want a value stored as a number, store it as a number like this, where I'm creating a new variable named myNumericValue :

 var myStringValue = "5"  var myNumericValue = 5

Now I can treat myNumericValue as a number. For example, if I wanted to add 1 to the value in myNumericValue , I could use the + addition operator (which we'll see in this chapter) like this:

 var myStringValue = "5"  var myNumericValue = 5  document.write(myNumericValue + 1 + "<BR>")

This displays the number 6, as it should. If I tried to do the same thing, adding 1 to the value in myStringValue as follows, I would get an entirely different result:

 var myStringValue = "5"  var myNumericValue = 5  document.write(myNumericValue + 1 + "<BR>")  document.write(myStringValue + 1 + "<BR>")

This time, JavaScript takes the string "5" and sees you're using the + operator on it, which, to JavaScript, means you're joining strings together, not adding numbers. The result is that JavaScript converts the number 1 you're adding here to a string, which means that myStringValue + 1 actually displays "51," not a value of 6!

So how do you convert the value in myStringValue to a number? JavaScript has two built-in functions that enable you to do that: parseInt and parseFloat . We were introduced to functions in the previous preceding chapterwhen you place a function's name in your code, that function is called, and the code in it is executed. As we'll see in the next chapter, you can pass data values to a function for that function to work on, and that's how parseInt and parseFloat work.

You use parseInt to convert a quoted number (such as "5") into an integer and parseFloat to convert a quoted number (such as "2.7128") into a floating-point number. To pass a data value to a function like these, you place that value in parentheses after the function's name. That means I can convert the value in myStringValue to a number and add 1 to it (to get a result of 6) like this:

 var myStringValue = "5"  var myNumericValue = 5  document.write(myNumericValue + 1 + "<BR>")  document.write(parseInt(myStringValue) + 1 + "<BR>")

That's all it takes; parseInt converted the string myStringValue into a number for us. For an example using parseInt , see the section, "The onfocus Event," in Chapter 6, "Using Core HTML Methods and Events."

Tip

You can also pass the parseInt function a base (called a radix ) to convert numbers to. For example, parseInt(myStringValue, 16) converts myStringValue from a string into a hexadecimal (base 16) number.

More recently (since Netscape Navigator 4.0 and Internet Explorer 4.0), you can use the Number function, which converts strings to either integers or floating-point numbers, as appropriate:

 var myStringValue = "5"  var myNumericValue = 5  document.write(myNumericValue + 1 + "<BR>")  document.write(parseInt(myStringValue) + 1 + "<BR>")  document.write(Number(myStringValue) + 1 + "<BR>")

Tip

To make sure the value returned by parseInt , parseFloat , or Number is a valid number, you can use the isNaN function (the name stands for "is not a number"), which we'll see in Chapter 3, "The JavaScript Language: Loops, Functions, and Errors," like this: isNaN(myValue) . If myValue is not a legal number, isNaN(myValue) will evaluate to true, which you can check with the if statement, coming up at the end of this chapter.

What about going the other way? What about converting numbers to strings? For example, what if you want to convert the number 5 into the string "5" ? We've seen that when you add a number to a string where the string comes first, such as "5" + 1 , the result is a string, "51" . So if you add an empty string, "" , with no characters in it, to a number, the result is a string. That means to convert the number 5 to the string "5" , you can just add the number to the empty string like this: "" + 5 . Here's how it looks in code:

 myStringValue = "" + 5

The fact that variables can hold both numeric and string data sometimes leads to problems, as when you add the wrong type of value to the data already in a variable, and it's something to watch out for if your scripts aren't performing as they should.