How to Convert a String to a Number in JavaScript

By /

This guide teaches you 7 different ways to convert a string to a number in JavaScript.

Here is a quick overview of the methods you’re about to learn:

  1. The parseInt() function
  2. The parseFloat() function
  3. The Math.floor() function
  4. The Number() constructor
  5. The unary operator (+)
  6. The double-tilde operator (~~)
  7. Multiply by a number

Let’s take a more detailed look at each of these approaches and also consider whether it makes sense to use them or not.

1. The parseInt() Function

Perhaps the most intuitive way to convert a string to a number is by using the built-in parseInt() method.

For example, let’s convert the string “195” to a number:

const numStr = "195"
const numInt = parseInt(numStr)

console.log(numInt)

Output:

195

The problem with this approach is that this always converts the string to a whole number. If you’re dealing with floats, the method will round the number.

const numStr = "195.12"
const numInt = parseInt(numStr)

console.log(numInt)

Output:

195

Luckily, the problem is solved easily by using the parseFloat() method, which is the second approach on this list.

2. The parseFloat() Function

Another popular way to convert a string to a number in JavaScript is by using the parseFloat() function. As the name suggests, this method is great for converting a string that represents a floating point number to a float.

For example, let’s call this method on a string of “195.12”:

const numStr = "195.12"
const numFloat = parseFloat(numStr)

console.log(numFloat)

Output:

195.12

As you can see, this method works for floating point values and doesn’t do rounding unlike the parseInt() method introduced previously.

3. The Math.floor() Function

In JavaScript, there’s a built-in function Math.floor() that rounds numbers down to the nearest integers. Besides calling this function on an integer or float, you can also call it on strings that represent numbers.

For example, let’s round these three strings that represent floats to the nearest whole numbers:

const a = Math.floor("54")
const b = Math.floor("4.25")
const c = Math.floor("1.99")

console.log(a)
console.log(b)
console.log(c)

Output:

54
4
1

Although this approach of converting strings to numbers doesn’t probably make much sense, it still works!

4. The Number() Constructor

One simple way to convert a string to a number in JavaScript is by using the Number() constructor. This approach is convenient and readable as the intention of converting a string to a number is clear.

Notice that the string version of a number can even contain white spaces and the conversion will still work.

For example, let’s convert two integers and a float from strings to numbers:

const a = Number("14")
const b = Number("     15     ")
const c = Number("3.13")

console.log(a)
console.log(b)
console.log(c)

Output:

14
15
3.13

To preserve code quality when converting numbers to strings, I’d recommend using the Number() constructor. This makes the Number() constructor one of my favorite approaches to converting strings to numbers.

5. The Unary Operator (+)

The unary + operator tries to convert the operand to a number if it’s not a number already.

In the case of an empty string, the unary operator produces 0.

And if the string cannot be represented as a number, this operator returns NaN.

For instance:

const a = +"23"
const b = +""
const c = "Yeah"

console.log(a)
console.log(b)
console.log(c)

Output:

23
0
NaN

Even though this approach might be the shortest one to convert a string to a number, it’s not intuitive. If you are reading code that says +”53″, you might have to scratch your head a bit. Especially if the + is applied on a less intuitive operand, such as a function call such as +getAge().

6. The Double-Tilde Operator (~~)

In JavaScript, the tilde operator (~) is the bitwise negation operator. It flips the bits of a binary digit and returns a signed integer.

For example, ~0100 is 1011. In other words, 4 becomes -5 (because of JavaScript’s signed integers).

When you apply this operation twice on a number, the result is the original number. For example ~~0100 –> ~1011 –> ~0100.

If you apply this operator twice on a string, the result is the number that the string represents!

For example:

const a = ~~"64"
console.log(a)

Output:

64

Notice that this approach doesn’t convert floating point strings to actual floats because the result is an integer.

const a = ~~"64.993"
console.log(a)

Output:

64

Let’s consider the example of converting a string “64” to a number with the double-bitwise negation: ~~”64″.

Here’s a quick recap of the process.

~~"64"       -->
~(~"64")     -->
~(~64)       -->
~(~01000000) -->
~(10111111)  -->
01000000     -->
64

Here’s the explanation as to how and why the above process works like that:

  • JavaScript first evaluates the inner bitwise operator ~”64″.
  • Because the bitwise negation works for binary digits only, JavaScript has to cast the string to a number. This means it will perform ~64 instead of ~”64″.
  • JavaScript then converts the number 64 to a binary digit and applies the bitwise negation to it. In binary, the number 64 is 010000000. Thus, its negation is 10111111 which is -65 as a signed integer in JavaScript. Now JavaScript has applied the inner bitwise negation.
  • At this point, the outer bitwise negation kicks in and does ~10111111 which results in 01000000 which is 64.

Hopefully, this clarifies how and why the double bitwise negation operation works behind the scenes.

Notice that the double-tilde approach is the most unintuitive way to convert a string to a number. If you read code with double-tildes, you have to spend time looking up what it means. It would be much cleaner to use the Number() constructor or the parseInt/parseFloat functions.

7. Multiply by Number

Last but not least, you can always convert a string to a number by multiplying the string by a numeric value.

For example, let’s convert these two number strings to actual numbers by multiplying by 1.00 and 1.

const a = "15" * 1.00
const b = "12" * 1

console.log(a)
console.log(b)

Output:

15
12

Multiplying a string by a number to convert it to a number is also not the most elegant way to do it. Unless it makes contextual sense to convert a string to a number this way, you should probably use a more readable approach such as the parseInt/parseFloat methods.

Summary

Today you learned how to convert a string into a number in JavaScript.

It’s up for debate as to what approach you should use. To write readable code, the Number() constructor or the parseInt/parseFloat methods are great options you should rely on.

To keep it in scope, we are not going to do any performance comparisons.

I hope you found the answer you were looking for in this guide.

Scroll to Top