How to convert string to number in JavaScript (BE CAREFUL!)

Converting string to number in JavaScript is easily achievable using some of the built in methods. I’m saying “some”, because there are quite a few ways to achieve this. However, it could be a little confusing due to the fact that some of them will return a different result than the others.

Here are the most popular methods to transform string to number using vanilla JavaScript:

Number

Probably the best method to convert string to number is the Number() function.

This method works for both integer and decimal numbers. An important thing to mention here – if the value(the string) can’t be converted to legal number, NaN(Not a number) will be returned.

Examples:

Number('-1') // -1
Number('-1.111') // -1.111
Number('') // 0
Number('-1.111dfgfd') // NaN (not a number)
Number('-1,111') // NaN (not a number)

Have in mind that using comma as a decimal separator, will also result in NaN while providing empty string as input will result in 0, not NaN.

Unary Operator (+)

Another cool method is to use the unary operator + before the string. It is less popular which can cause readability problems while someone is reading/refactoring your code.

The behavior is the same as using the Number() one mentioned above.

Examples:

+'-1' // -1
+'-1.111' // -1.111
+'' // 0
+'-1.111dfgfd' // NaN (not a number)
+'-1,111' // NaN (not a number)

Multiply by 1 (* 1) – FASTEST

Multiplying by one have the same behavior like the unary operator, but it is a little bit faster. 

Examples:

'-1'*1 // -1
'-1.111'*1 // -1.111
''*1 // 0
'-1.111dfgfd'*1 // NaN (not a number)
'-1,111'*1 // NaN (not a number)

Keep in mind that unless your have a millions of records that need to be converted from string to number, the speed shouldn’t be critical.

ParseInt / ParseFloat

A different solution with different behavior.

In case you are working with integers only, parseInt() could be a good choice and of course parseFloat() when working with decimal numbers.

Both parseInt and parseFloat accept two parameters as arguments:

• string to convert (‘1.11’ for example)
• Radix – 10 by default which is what we need for our case, but you can change it (optional)

parseInt examples:

parseInt('-1') // 1
parseInt('-1.111') // -1
parseInt('') // NaN(not a number)
parseInt('-1.111dfgfd') // -1
parseInt('fdsfs111') // NaN(not a number)
parseInt('-1,111') // -1

As you can see from the example above, this way of converting has some differences from the previous ones.

The most obvious and expected thing is that it cuts the decimal number and turns everything into an integer(whole number). The other important difference is that even if the string is not a valid number, like ‘-1.111dfdfd’, it takes the valid part and convert it into an integer.

However, if the string starts with invalid digit, like ‘fdsfs111’, the result is NaN. And one more thing, the empty string mentioned a little bit earlier is NOT valid while the previous methods were converting it to 0.

If you want to keep the decimal part, use the parseFloat().

parseFloat('-1') // 1
parseFloat('-1.111') // -1.111
parseFloat('') // NaN(not a number)
parseFloat('-1.111dfgfd') // -1.111
parseFloat('fdsfs111') // NaN(not a number)
parseFloat('-1,111') // -1

The situation here is similar, but the decimal part of the numbers is also retained, not just the whole number.

Conclusion

As you already saw, there is a lot of different ways to convert string to number in JavaScript.

It’s according to your preference and views to decide which one you want to go for. If the performance is critical for your application and you are transforming huge amount of data, I would go for the unary operator(+) or multiply(*1). However, if this is not the case, go for Number(), but be careful when working with invalid data – keep in mind that empty string is converted to 0.

And one more thing – pick your method and stick with it unless you have a special case that require to use different transformation method. Be consistent!

Good Luck!