There are multiple ways to convert a string into a number using JavaScript. You can either use an actual number (e.g. 89) or a string (e.g. '89') to represent a number in JavaScript. But if you compare both, they won't be same as they represent two different kinds of objects:

const number1 = 89;
const number2 = '89';

if(number1 === number2) {
    Console.log(true);
} else {
    console.log(false);
}
// false

Let's look at 6 different methods to convert a string into a number.

parseInt()

The parseInt() method converts a string into a whole number (an integer). It takes two arguments. The first argument is the string to convert. The second optional argument is the base number called radix:

parseInt('45') // 45
parseInt('99.49') // 99
parseInt('123Greetings.png') // 123

For decimal numbers, the radix is always 10. The parseInt() method can also be used for parsing hexadecimal strings with radix value 16:

parseInt(0xFF) // 255
parseInt('0xEE', 16) // 238

Always use parseInt() with a radix to avoid unexpected results. parseInt() can also be used to get a number from a string that may contain other characters (only if it starts with a number):

parseInt('10M') // 10
parseInt('$10M') // NaN

parseFloat()

The parseFloat() method converts a string into a floating point number. It only takes one parameter which is the string to parse. Unlike parseInt(), parseFloat() does not parse hexadecimals strings to numbers. The decimal separator must be a point (.). Otherwise it will be dropped from the result:

parseFloat('9.49') // 9.99
parseFloat('50.00') // 50
parseFloat('3.5%') // 3.5
parseFloat('45,00') // 45
parseFloat('He is 29') // NaN

Number()

As the name suggests, the Number() method converts a string into a number. It takes one argument that can be an integer, a point number, a boolean value, or even a date object. However, if you pass a string that contains random characters, you will get NaN — stands for "Not a Number."

It's a less safe choice than parseInt() and parseFloat() for string to number conversion. If you are sure about the format of the number you're going to get from parsing, use those instead. If you want the parsing to fail with NaN if the string contains other symbols, Number() may actually be an excellent choice:

Number('24') //24 
Number('15.49') // 15.49
Number('10,350'); // NaN
Number('2rem'); // NaN

Bitwise Not (~)

Bitwise not (~) is another method that can be used to convert a string into an integer. It does not work for floating numbers and returns 0 instead of NaN if the string contains characters:

~~9.99 // 9
~~'50' // 50
~~'10.89' // 10
~~'10px' // 0

Bitwise not (~) can be a good choice to ensure input string does not include any character while parsing it to an integer.

Unary Operators

Unary operators (+, *, - and /) can also used for strings conversion to numbers. Just like bitwise not, unary operators are not happy to see other characters in the string and return NaN instead of 0 or guessing the number:

+'10' // 10
'0xFF' - 15 // 240
'49.5' * 1 // 49.5
'100' / 2 // 50
'10,00' * 1 // NaN

Math.floor()

The Math.floor() method is similar to unary operator + but only returns the integer part of the string:

Math.floor('10') // 10
Math.floor('12.5') // 12
Math.floor('10,000') // NaN

✌️ Like this article? Follow @attacomsian on Twitter. You can also follow me on LinkedIn and DEV. Buy me a coffee (cost $3)

Need help to start a new Spring Boot or MEAN stack project? I am available for contract work. Hire me to accomplish your business goals with engineering and design. Let’s talk about your project: hi@attacomsian.com.