In this section we'll look at two conversion functions that convert strings to numbers: parseInt() and parseFloat().
Let's take parseInt() first. This function takes a string and converts it to an integer. The name is a little confusing at first—why parseInt() rather than convertToInt()? The main reason for the name comes from the way that the function works. It actually goes through (that is, parses) each character of the string you ask it to convert and sees if it's a valid number. If it is valid, parseInt() uses it to build up the number; if it is not valid, the command simply stops converting and returns the number it has converted so far.
The parseFloat() function works in the same way as parseInt(), except that it returns floating-point numbers—fractional numbers—and that a decimal point in the string, which it is converting, is considered to be part of the allowable number.
Let's look at an example using parseInt() and parseFloat(). Type in the following code and save it as ch2_examp7.htm.
Load it into your browser, and you'll see three lines written in the web page as shown in Figure 2-13.
Our first task in the script block is to declare some variables. The variable myString is declared and initialized to the string we want to convert. We could just as easily have used the string directly in this example rather than storing it in a variable, but in practice you'll find that you use variables more often than literal values. We also declare the variables myInt and myFloat, which will hold the converted numbers.
var myString = "56.02 degrees centigrade"; var myInt; var myFloat;
Next, we write to the page the converted integer value of myString displayed inside a user-friendly sentence we build up using string concatenation. Notice that we use the escape sequence \" to display quotes (") around the string that we are converting.
document.write("\"" + myString + "\" is " + parseInt(myString) + " as an integer" + "<br>");
Next we do the same conversion of myString using parseInt(), but this time we store the result in the myInt variable. On the following line we use the result in some text we display to the user.
myInt = parseInt(myString); document.write("\"" + myString + "\" when converted to an integer equals " + myInt + "<br>");
Finally, we use parseFloat() to convert the string in myString to a floating-point number, which we store in the variable myFloat. This time the decimal point is considered to be a valid part of the number, so it's anything after the 2, which is ignored. Again we use document.write() to write the result to the web page inside a user-friendly string.
Some strings simply are not convertible to numbers, such as strings that don't contain any numerical data. What happens if we try to convert these strings? As a little experiment, try changing the preceding example so that myString holds something that is not convertible. For example, change the line
var myString = "56.02 degrees centigrade";
var myString = "I'm a name not a number";
Now reload the page in your browser and you should see what's shown in Figure 2-14.
You can see that in the place of the numbers we got before, we get NaN. What sort of number is that? Well, it's Not a Number at all!
If you use parseInt() or parseFloat() with any string that is empty or does not start with at least one valid digit, you get NaN, meaning Not a Number.
myVar1 = isNaN("Hello");
will store the value true in the variable myVar1, since "Hello" is not a number, whereas
myVar2 = isNaN(34);
will store the value false in the variable myVar2, since 34 can be converted successfully from a string to a number by the isNaN() function.
In the next chapter we'll see how you can use the isNaN() function to check the validity of strings as numbers, something that proves invaluable when dealing with user input, as we'll see in Chapter 6.