How to convert a string to a number in JavaScript
Learn how to convert a string to a number using JavaScript
JavaScript provides various ways to convert a string value into a number.
Best: use the Number object
The best one in my opinion is to use the Number object, in a non-constructor context (without the new
keyword):
const count = Number('1234') //1234
This takes care of the decimals as well.
Number is a wrapper object that can perform many operations. If we use the constructor (new Number("1234")
) it returns us a Number object instead of a number value, so pay attention.
Watch out for separators between digits:
Number('10,000') //NaN
Number('10.00') //10
Number('10000') //10000
In the case you need to parse a string with decimal separators, use Intl.NumberFormat
instead.
Other solutions
Use parseInt()
and parseFloat()
Another good solution for integers is to call the parseInt()
function:
const count = parseInt('1234', 10) //1234
Don’t forget the second parameter, which is the radix, always 10 for decimal numbers, or the conversion might try to guess the radix and give unexpected results.
parseInt()
tries to get a number from a string that does not only contain a number:
parseInt('10 lions', 10) //10
but if the string does not start with a number, you’ll get NaN
(Not a Number):
parseInt("I'm 10", 10) //NaN
Also, just like Number it’s not reliable with separators between the digits:
parseInt('10,000', 10) //10 ❌
parseInt('10.00', 10) //10 ✅ (considered decimals, cut)
parseInt('10.000', 10) //10 ✅ (considered decimals, cut)
parseInt('10.20', 10) //10 ✅ (considered decimals, cut)
parseInt('10.81', 10) //10 ✅ (considered decimals, cut)
parseInt('10000', 10) //10000 ✅
If you want to retain the decimal part and not just get the integer part, use parseFloat()
. Note that unlike
its parseInt()
sibling, it only takes one argument – the string to convert:
parseFloat('10,000') //10 ❌
parseFloat('10.00') //10 ✅ (considered decimals, cut)
parseFloat('10.000') //10 ✅ (considered decimals, cut)
parseFloat('10.20') //10.2 ✅ (considered decimals)
parseFloat('10.81') //10.81 ✅ (considered decimals)
parseFloat('10000') //10000 ✅
Use +
One “trick” is to use the unary operator +
before the string:
+'10,000' //NaN ✅
+'10.000' //10 ✅
+'10.00' //10 ✅
+'10.20' //10.2 ✅
+'10.81' //10.81 ✅
+'10000' //10000 ✅
See how it returns NaN
in the first example, which is the correct behavior: it’s not a number.
Use Math.floor()
Similar to the +
unary operator, but returns the integer part, is to use Math.floor()
:
Math.floor('10,000') //NaN ✅
Math.floor('10.000') //10 ✅
Math.floor('10.00') //10 ✅
Math.floor('10.20') //10 ✅
Math.floor('10.81') //10 ✅
Math.floor('10000') //10000 ✅
Use * 1
Generally one of the fastest options, behaves like the +
unary operator, so it does not perform conversion to an integer if the number is a float.
'10,000' * 1 //NaN ✅
'10.000' * 1 //10 ✅
'10.00' * 1 //10 ✅
'10.20' * 1 //10.2 ✅
'10.81' * 1 //10.81 ✅
'10000' * 1 //10000 ✅
Performance
Every one of these methods has a different performance on different environments, as it all depends on the implementation. In my case, * 1
is the winner performance-wise 10x faster than other alternatives.
Use JSPerf to try yourself:
→ I wrote 17 books to help you become a better developer:
- C Handbook
- Command Line Handbook
- CSS Handbook
- Express Handbook
- Git Cheat Sheet
- Go Handbook
- HTML Handbook
- JS Handbook
- Laravel Handbook
- Next.js Handbook
- Node.js Handbook
- PHP Handbook
- Python Handbook
- React Handbook
- SQL Handbook
- Svelte Handbook
- Swift Handbook
Also, JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025