published: 21 Jul 2022
2 min read
How to convert a string to a number in JavaScript
There are multiple ways to convert a string into a number using JavaScript. You can use an actual number (e.g. 89) or a string (e.g. '89') to represent a number.
But if you compare both, they won't be the 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)
}
// Output => false
Let's look at 6 different methods to convert a string into a number.
parseInt() method
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() method
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 hexadecimal 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() method
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 - a stand 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 being parsed, use those methods 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 better choice to ensure the input string does not include any character while parsing it to an integer.
Unary operators
Unary operators (+, *, -, and /) can also be used for string 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() method
The Math.floor() method is similar to the 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
Are we missing something? Help us improve this article. Reach out to us.
How to convert a string to a number in JavaScript
There are multiple ways to convert a string into a number using JavaScript. You can use an actual number (e.g. 89) or a string (e.g. '89') to represent a number.
But if you compare both, they won't be the 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)
}
// Output => false
Let's look at 6 different methods to convert a string into a number.
parseInt() method
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() method
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 hexadecimal 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() method
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 - a stand 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 being parsed, use those methods 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 better choice to ensure the input string does not include any character while parsing it to an integer.
Unary operators
Unary operators (+, *, -, and /) can also be used for string 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() method
The Math.floor() method is similar to the 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
Are you looking for other code tips?
JS Nooby
Javascript connoisseur
