Learn how to convert a string to a number using JavaScript.

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

Best: Use the Number Object

The best and recommended way is to use the Number object in a non-constructor context, without the new keyword:

const count = Number('1234'); // 1234

This method takes care of decimal values as well.

It’s important to note that the Number object is a wrapper object that can perform various operations. If you use the constructor (new Number("1234")), it will return a Number object instead of a number value, so be careful with that.

Watch out for separators between digits when using the Number object:

Number('10,000'); // NaN
Number('10.00'); // 10
Number('10000'); // 10000

In case you need to parse a string with decimal separators, it’s recommended to use Intl.NumberFormat instead.

Other Solutions

Use parseInt() and parseFloat()

Another good solution for integers is to use the parseInt() function:

const count = parseInt('1234', 10); // 1234

Make sure to include the second parameter, which is the radix. It should always be 10 for decimal numbers to avoid unexpected results.

parseInt() tries to extract a number from a string that contains additional characters:

parseInt('10 lions', 10); // 10

But if the string does not start with a number, it will return NaN (Not a Number):

parseInt("I'm 10", 10); // NaN

Similar to the Number object, parseInt() is 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 the integer part, use parseFloat(). Unlike its parseInt() counterpart, it only takes one argument, which is 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 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 ✅

Notice how it returns NaN in the first example, which is the correct behavior because it’s not a number.

Use Math.floor()

Similar to the unary operator +, but only 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

Another option, which is generally faster, is to use * 1. It behaves like the unary operator + and 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

Each of these methods has different performance characteristics depending on the environment. In general, * 1 is considered the fastest option, being 10x faster than the others in some cases.

Use JSPerf to test and compare the performance yourself.

Tags: JavaScript, string to number, parseInt, parseFloat, unary operator, Math.floor, performance