JavaScript provides several ways to convert a string value into a number.

Using the Number Object

The best approach 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.

Number.parseInt()

Parses the argument as an integer number and returns it:

Number.parseInt('10') //10
Number.parseInt('10.00') //10
Number.parseInt('237,21') //237
Number.parseInt('237.21') //237
Number.parseInt('12 34 56') //12
Number.parseInt(' 36 ') //36
Number.parseInt('36 is my age') //36

Number.parseInt() is pretty flexible. It can also convert strings with words, extracting the first number, but the string must start with a number:

Number.parseInt('I am Flavio and I am 36') //NaN

You can add a second parameter to specify the radix. Radix 10 is default but you can use octal or hexadecimal number conversions too:

Number.parseInt('10', 10) //10
Number.parseInt('010') //10
Number.parseInt('010', 8) //8
Number.parseInt('10', 8) //8
Number.parseInt('10', 16) //16

Number.parseFloat()

Parses the argument as a float number and returns it. The argument is a string:

Number.parseFloat('10') //10
Number.parseFloat('10.00') //10
Number.parseFloat('237,21') //237
Number.parseFloat('237.21') //237.21
Number.parseFloat('12 34 56') //12
Number.parseFloat(' 36 ') //36
Number.parseFloat('36 is my age') //36

Number.parseFloat('-10') //-10
Number.parseFloat('-10.2') //-10.2

Number.parseFloat() is pretty flexible. It can also convert strings with words, extracting the first number, but the string must start with a number:

Number.parseFloat('I am Flavio and I am 36') //NaN

It only handles radix 10 numbers.

Using the Unary + Operator

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.

Using 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 ✅

Using * 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 general, * 1 is often the winner performance-wise, being up to 10x faster than other alternatives.

Lessons in this unit:

0:	Introduction
1:	Number Basics
2:	Number Validation
3:	▶︎ Parsing Numbers
4:	Formatting Numbers
5:	Number Recipes
6:	The Binary Number System
7:	Underscores in numbers
8:	The Decimal Number System
9:	Converting Numbers from Decimal to Binary