Abstract: JavaScript is a magic language, there are 5 ways to convert strings to numbers, each has its own pit method!

  • 译 文: Converting Strings to Number in Javascript: Take-aways
  • Translator: Fundebug

The copyright of this article belongs to the original author

There are many ways to convert a String to a Number, and I can think of five!

parseInt(num); // Default mode (no cardinality)
parseInt(num, 10); // Pass the base (ten digits)
parseFloat(num); / / floating point number
Number(num); // Number constructor
~~num; / / not by location
num / 1; // Divide a number
num * 1; // Multiply by a number
num -
0 + / / minus 0
    num; // unary operator "+"
Copy the code

Which one to choose? When to choose it? Why choose this one? We break it down one by one and break down the common pitfalls of each approach.

parseInt

According to JsPerf.com benchmarks, most browsers responded best to parseInt. While it’s the fastest way, there are some common pitfalls with preseInt:

parseInt("08"); // Returns part of the old browser.
parseInt("44.jpg"); // returns 44
Copy the code

ParseInt (num, 10) : If you do not know the type of the num attribute, do not use parseInt to convert a string to a number.

parseFloat

This is a great option if you don’t parse hexadecimal numbers. Such as:

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

Note: A negative hexadecimal number in a string is a special case, and if you parse with parseFloat, the result is incorrect. To avoid NaN cases in your program, you should check the converted values.

parseFloat("44.jpg"); // return 44
Copy the code

ParseFloat: Be careful converting hexadecimal numbers. Do not use parseFloat if you do not know the type of object you are converting.

According to a non

Strings can be converted to integers, but they are not floating point numbers. If it is a string conversion, it returns 0;

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

How does this work? By flipping each bit, also known as the number’s A1 complement. You can use it, but only for integers. So generally don’t use it unless you are sure that the number is between 32-bit integers (because of the specification of the ToInt32 call).

Bitwise non: Use this to ensure that there are no characters in the input, only for integers.

Number

The problem with Number is the same as with the above conversion, parsing is trying to find the Number you gave him:

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

Note that 023 is actually an octal number and returns 19 no matter what you do; This is true for hexadecimal numbers without single or double quotes.

Number is also one of the slowest in JsPerf.

Number: Hardly ever.

Unary operator

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

Unary operators are different from other parsing methods in that they return NaN if it is a NaN value. This is my favorite way to convert numbers, because I don’t think any object with a character should be treated as a zero or “guess” based on how many bits it has. I mostly use the + operator because it’s not confusing. While the use of -0 is also good, it doesn’t do a very good job of expressing the intent of the conversion to a number.

Summary of the way strings are converted to numbers

-hexadecimal number when a string is converted to a number. You should first convert anything to a String (for example, by + “”) and then parse it to a number using a unary operator or a radix parseInt. But when the result is not a NaN value, parseFloat is more appropriate.

About Fundebug

Fundebug focuses on real-time BUG monitoring for JavaScript, wechat applets, wechat games, Alipay applets, React Native, Node.js and Java online applications. Since its launch on November 11, 2016, Fundebug has handled more than 1 billion error events in total, and paid customers include Google, 360, Kingsoft, Minming.com and many other brands. Welcome to try it for free!

Copyright statement

Please indicate the author Fundebug and the address of this article:

Blog.fundebug.com/2018/07/07/…