Here is a quick overview of the methods you’re about to learn:
- The parseInt() function
- The parseFloat() function
- The Math.floor() function
- The Number() constructor
- The unary operator (+)
- The double-tilde operator (~~)
- 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)
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)
Luckily, the problem is solved easily by using the parseFloat() method, which is the second approach on this list.
2. The parseFloat() Function
For example, let’s call this method on a string of “195.12”:
const numStr = "195.12" const numFloat = parseFloat(numStr) console.log(numFloat)
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
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)
54 4 1
Although this approach of converting strings to numbers doesn’t probably make much sense, it still works!
4. The Number() Constructor
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)
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.
const a = +"23" const b = +"" const c = "Yeah" console.log(a) console.log(b) console.log(c)
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 (~~)
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!
const a = ~~"64" console.log(a)
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)
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:
- 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)
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.
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.
Thanks for reading. Happy coding!