JavaScript: Convert String to Number

There are time when you need to convert a String to a Number in JavaScript. This can be very helpful in many situations, including when taking input from a user and passing that on to a function or object property. This article shows you how to use a short hand with the + operator (the quick and easy way), as well as using the parseInt(), parseFloat(), and Number() method for parsing string values into a number. This article also explains how each of these methods of conversion works so you have a better understanding of when the appropriate time is to use each within your own application code.

Use the + operator

There exists a short hand in JavaScript for converting string values to numbers. You can use the + (plus) operator to do this. Now, let’s walk through a journey of numbers, strings, and finally the + operator of converting strings to numbers in JavaScript!

The following expression will set a variable equal to the value of 1:

var val1 = 1;

Now let’s add a + in front of the 1. What do you think will happen?

var val1 = +1;
// sets val1 to 1 as a Number

Since the + operator is a mathematical operator in JavaScirpt, it will attempt to add what ever is on the left and the right side of the operator. Since, in this case, nothing is to the left, it will add 0 (zero) to what’s on the right of the operator; in this case ‘1’.

This will result in a Number of the value 1; This works because when you try to add a Number to a String in JavaScript, it will automatically try to parse out the strin g into a number.

As a result this also works:

var val1 = 4 + '1';
// returns 5 (Number)

However, what about when the string is not a number? Well, in this case instead of a parsed number being returned, JavaScript will return a value of NaN or not a number.

var val1 = +'chris';
// return NaN

When you are returned a NaN (not a number) result in your variable, if you attempt to add another number to it the result will always be NaN. So, you’ll always want to check if the result is NaN before doing something with it.

To do this, you can use the isNaN function in JavaScript to double check the string to number parsing worked successfully:

var val1 = +'chris';
if (isNaN(val1)) {
    val1 = 0;
}
// returns 0 (Number)

var val2 = +'42';
if (isNaN(val2)) {
    val2 = 0;
}
// returns 42 (Number)

parseInt() function

The parseInt() function in JavaScript can be used to parse a string argument and return an integer of the specified radix (the base in mathematical numeral systems).

// Parse a simple integer (default of base 10)
var val1 = parseInt('23');
// returns 23 (Number)

// Parse a integer in base 16 format
var val2 = parseInt('0xF', 16);
// return 15 (Number)

// Parse a string that's not a number
var val3 = parseInt('test');
// returns NaN

What if you don’t want to get a NaN result if the parsing of the integer failed? Well, you can easily check the result with the isNaN function and then handle it accordingly.

Here’s a sample of how to check if the result returned from the parseInt function is not a number (NaN):

var val1 = parseInt('test');

if (isNaN(val1)) {
    // do something here
    // like set it to 0 instead
    val1 = 0;
}

// returns 0 (Number)

Now what if you want this isNaN check to be automatic and built into the parseInt function? Well, you can’t modify the built-in parseInt function, but you can write your own function that includes the isNaN check inside it.

Here’s a helpful method that wraps this up with an isNaN (is not a number) check:

function parseCleanInt(x, base) {
    const parsed = parseInt(x, base);
    if (isNaN(parsed)) { return 0; }
    return parsed;
}

// Parse a simple integer (default of base 10)
var val1 = parseCleanInt('23');
// returns 23 (Number)

// Parse a simple integer of base 10
var val2 = parseCleanInt('23', 10);
// returns 23 (Number)

// Parse a integer in base 16 format
var val3 = parseCleanInt('0xF', 16);
// returns 15 (Number)

parseFloat() function

The parseFloat() function can be used to parse a string argument and return a floating point number.

var val1 = parseFloat('3.14');
// returns 3.14 (Floating point number)

You can even pass in a string that contains non-numeric characters, as long as the string starts with the number you wish to parse:

var val1 = parseFloat('3.14test');
// returns 3.14 (Floating point number)

Also, like previous methods shown, be sure to use the isNaN method to double check the parse compeleted successfully and you didn’t get a NaN (not a number) result.

Number() constructor

The Number() constructor can be used to parse a string into a number too. This function will determine, based on the string parsed, whether to return an integer or floating point number. Plus, an invalid parse will also return NaN too.

var val1 = Number('42');
// returns 42 (Number)

var val2 = Number('3.14');
// return 3.14 (Floating point number)

var val3 = Number('3.14test');
// returns NaN

The Number() constructor is a little different than the other methods shown above. This is a constructor of the Number object type in JavaScript, and you’re calling it directly htis way to creat a new object of type Number, and passing the constructor of that object the value to parse.