There are many ways to convert a string to a number. There are at least five ways I can think of!

parseInt(num); // Default (no cardinality) parseInt(num, 10); // parseInt uses the base (decimal) parseFloat(num); Num * 1 = num * 1 = num * 0 = num * 0 = num * 1 = num * 0 = num * 1 = num * 0 = num * 1 = num * 0Copy the code

Which approach should be used? What time? Why is that? This involves analyzing each method and the common pitfalls of using them.

Benchmarks indicate that ParseInt is optimized for most browsers, according to a set of tests on JsPerf.com. Although it may be the fastest method, it can cause the following errors:

ParseInt ('08') // In some older browsers returns 0 parseInt('44.jpg') // returns 44Copy the code

ParseInt: always use cardinality = parseInt(num, 10); If you don’t want it to infer values from characters, don’t use it.

What about PareseFloat? It works fine when it doesn’t deal with hexadecimal numbers; Example:

parseInt(-0xFF) // returns -255
parseInt("-0xFF") // returns -255
parseFloat(-0xFF) // returns -255
parseFloat("-0xFF") // returns 0
Copy the code

Note that a string with a negative hexadecimal number is a special case and may cause unexpected errors when you parse it in your application. Always check NaN values in your application to avoid surprises.

In addition, it produces the same error as parseInt when numbers contain characters:

`parseFloat('44.jpg') // returns 44`
Copy the code

**parseFloat: When dealing with hexadecimal numbers, be careful; If you don’t want it to infer values from characters, don’t use it.

Another method is “bitwise inverse” (~). You can only use it to convert strings to integers, not to floating-point numbers. The nice thing about it is that it returns 0 when it encounters a non-numeric character.

~~1.23 // returns 1
~~"1.23" // returns 1
~~"23" // returns 23
~~"Hello world" // returns 0
Copy the code

What did it do? It “flips” each binary bit, also known as the A1 complement. You can use it, but be aware that it can only handle integers. So, don’t use it unless you’re sure the value is in the range of a signed 32-bit integer (because it’s called ToInt32 in the specification).

Reverse bitwise, use to ensure that there are no non-numeric characters, only for integer conversions

What about the Number function? When it parses, it will try to figure out the number from the character you gave it:

Number("023") // returns 23
Number(023) // returns 19
Copy the code

(Note that 023 is actually an octal number. No matter what you do, it returns 19; Same for hexadecimal numbers without quotes.)

The Number function was also the slowest method in the JsPerf test results.

Number, do not use this parameter

The final method: unary operation.

"1.23" * 1 // returns 1.23" 0xFF" -0 // returns 255 "0xff.jpg" / 1 // returns NaN +"023" // returns 23Copy the code

Unlike the other ways, unary operations throw a NaN value when dealing with non-numbers. This is also one of my favorites, because a character should not be considered zero or guessed from how many bits it has. I use the + operation most of the time because it’s the least messy operation. Unary operations are not the best way to perform, though — even if -0 is good.

What’s the best way to convert a string to a number?

A negative hexadecimal number is the only number that is opened on a string break. Other numbers should be parsed into strings first and then into numbers by unary operations or parseints with cardinality. ParseFloat has a performance advantage, but it returns numbers in cases where it would be more appropriate to return NaN.