1. Computing
Send to a Friend via Email

Strings to Numbers

Join the Discussion

Questions? Comments?

One very common conversion that you will often need to do in your Javascript is to convert text string into numbers. The reason for this is that HTML does not provide any means for the people visiting your site to enter numbers into any input fields on your web page that will actually be considered to be a number field in the first place. HTML only provides our visitors with a means of entering text strings and it is then up to us to convert that text string into a number if that is what the text is supposed to contain.

Javascript provides a number of different ways that we can use to convert text into a number some oof which were actually created for that purpose and some of which achieve that conversion as a side effect of what they were actually intended to do. There are a few things we need to take into account when convertiing a text string into a number using any of the available methods and these may affect which of the various methods is the right one for you to choose.

  • does the text string actually contain a valid number? if it doesn't then we will not be able to convert it to one.
  • do we want the number to be an integer of can it have decimal places?
  • if it can have decimal places how many is it allowed to have?

In converting the text string to a number we will want to take the answers to these questions into account. First let's look at a list of the various ways that we can convert a test string into a numbber.

var numValue = +textValue;
var numValue = textValue - 0;
var numValue = textValue * 1;
var numValue = textValue / 1;
var numValue = Number(textValue);
var numValue = parseFloat(textValue,10);
var numValue = parseInt(textValue,10);

Using a unary plus operator on the text string is the quickest and easiest way of converting a text string into a number and works regardless of whether the number is positive or negative. If a non numerical value is contained in the text string then NaN will be the assigned result indicating that it is not a number. Subtracting zero or multiplying or dividing by one have the exact same effect as using the unary plus except for involving slightly longer code for the conversion. While in practice you will not notice an difference there is no reason for using any of these methods when a more efficient method is available.

Calling the Number() function to perform the conversion of the text field to a number is slower than any of the prior solutions simply due to the fact that it needs to call a function in order to perform the conversion rather than performing the conversion directly. The big advantage that it does have over the prior methods is that it makes it completely obvious what the code is actually doing and so if the efficiency of the code is not a major concern then this may be the best option to chhoose.

The final two methods shown that use parseFloat() and parseInt() are slightly different from all of the preceding methods in that the primary purpose of these functions is not the conversion of a text string into a number. These functions are actually intended to be used to convert numbers from one number base to another (for example from hexadecimal - base 16 - to decimal - base 10). In order to be able to convert the number to the desired base the value to be converted needs to be a number and so if a text string is supplied instead then that text string gets converted to a number in order for the function to use it as an input. The method that these two functions use to do the number conversion is different from that of the earlier methods shown in that instead of treating the whole text string as a whole and returning NaN if it is not a number, these functions instead extract as much from the start of the text string as can be converted into a number and will discard any non-numeric value that follows the number. This makes these functions useful where you have a text string that you know starts with a number and which may be followed by something else. The parseInt() function assumes thhat the number you want muust be an integer and so a period or exponential is discarded while parseFloat() will include decimal places and exponentials in the number extracted. These two functions will always extract an actual number since if the text string doesn't start with a number they will return zero. You may see examples of these functions being used by people who don't properly understand what they are for where they leave out the second parameter. With the 10 (indicating base 10) omitted the functions examine the start of the number to determine the nuumber base and any number starting with '0x' will be considered to be hexadecimal (and hence 'A' through 'F' will be considered to be numbers) while any number starting with '0' may be considered to be octal (and so 8 and 9 will be considered to not be numbers). If you were to specify 36 as the number base for either of these functions then all of the letters of the alphabet would be treated as numbers and a one followed by a zero would represent the number 36.

Resolving whether the text field contains a number or not is most easily determined by converting the field to a number and then seeing if the converted value is the numerical equivalent of the text string. If the text string contains anything that cannot be converted then the two values will not be equal (apart from being of different data types) and so we will then know that the text string does not contain a valid number.

if (numValue != textValue) alert('not a number');

This code will work for testing if the entire text string was a number regardless of which of the conversion methods is used but will not work with parseInt() and parseFloat() where the number to be extracted is expected to be followed by non-numeric data.

Where you need the number to be in a specific format such as an integer or having so many digits after the decimal point you have two choices.

The first option is to test the text string using a regular expression before performing the conversion in order to make sure thhat it contains a numerical value in the correct format. If you do this then you will not need to test the field after conversion to see if it is actually a number. The disadvantage of this is that if the number entered has the wrong number of decimal places specified then the number will be rejected rather than being corrected.

The second choice is to correct the number after it has been converted by applying the toFixed() method to the number field in order to adjust the number of decimal places to what is required.

No one of these solutions is the ideal one to use for all of your number conversions as which way you should handle the conversion depends on the answers to those earlier questions. Since Javascript does provide all of these different ways of converting numbers, you should be able to work out the most effective way of producing the number conversion you require by using the combination of those methods discussed here that is best suited to the results that you require.

©2014 About.com. All rights reserved.