Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan · April More text challenge”, click to see the details of the activity.

preface

ParseInt parses a string and returns a decimal integer of the specified radix, using the syntax parseInt(string, radix). Radix indicates the radix of the string, which ranges from 2 to 36.

When it comes to parseInt, two things come to mind. One is the truncation of parseInt. [‘1’, ‘2’, ‘3’]. Map (parseInt) The latter question, in particular, was a nightmare to begin with. But is that really all parseInt is? Explore parseInt’s many surprises with the bag below.

ParseInt (0.0000005) === 5

ParseInt = 5; parseInt = 5; parseInt = 5; parseInt = 5; (Note that the passed argument is a floating point type, not a string.)

The parseInt method receives the parseInt values string, radix radix. If the string argument is not a string, its toString method is called to convert it to a string. So there are two operations inside parseInt on non-string parses:

Step1: Call the toString method

(0.5).toString(); //  '0.5'
(0.05).toString(); //  '0.05'
(0.005).toString(); //  '0.005'
(0.0005).toString(); //  '0.0005'
(0.00005).toString(); //  '0.00005'
(0.000005).toString(); //  '0.000005'
(0.0000005).toString(); // '5e-7'
Copy the code

Notice the output above, we can see that when the number is too small, the result of the toString output is scientific notation.

Step2: Truncate operation

ParseInt can only interpret the leading part of a string as an integer value; It ignores any code unit that cannot be interpreted as an integer and does not have an ignore indication.

So the answer just returns 5, and the rest of the e-7 is ignored.

Matters needing attention:

If the value to be parsed is placed in a string, the above surprise will not occur:

parseInt("0.0000005"); / / 0
parseInt("0.000000005"); / / 0
Copy the code

The takeaway from this surprise is that implicit type conversions should be avoided whenever possible.

extension

If the number is too small, the toString method is called, and the scientific and technical format is returned. The same thing happens when the numbers are too large.

parseInt(999999999999999999999) / / 1
// (999999999999999999999).toString()
// '1e+21'
Copy the code

But the small package in the test process found some critical values, more strange, interested you can go to discuss.

/ / 10000000000000000
parseInt(9999999999999999)
Copy the code

Surprise 2: Radix defaults to 10, when does NaN return?

Here are a few ways to break down the surprise:

2.1 Radix values are undefined, 0 or unspecified

When the radix value is undefined, 0, or unspecified, how does JavaScript handle this:

  1. If the inputstring 以 0x 或 0XAt the beginning, thenradixWould be assumed to be16The rest of the string is parsed in hexadecimal.
  2. If the inputstring 以 0At the beginning,ES5Specifies the use of decimal, but not all browsers support it, so use itparseIntIs requiredradix
  3. If the inputstringStarting with any other value,radixA value of10

Let’s take a look at the rules in Google Chrome.

parseInt("0x16"); / / 22
parseInt("0888"); / / 888
parseInt("123px"); / / 123
Copy the code

2.2 Radix value less than 2 or greater than 36

The radix parameter has values from 2 to 36, and when the radix is less than 2 or greater than 36(not including 0), the return value is NaN

parseInt("123px".1); // NaN
parseInt("123px".38); // NaN
parseInt("123px", -1); // NaN
Copy the code

2.3 In the string to be converted, all the converted digits are not less than the radix value

For example, if the radix value is 2 (binary) and the string to be converted is ‘3456’, only 0 and 1 in binary are basic operators, so the string ‘3456’ cannot be converted to binary and returns NaN.

parseInt("3456".2); // NaN
parseInt("45px".3); // NaN
Copy the code

2.4 summarize

Now that we’re done, we’re ready to answer surprise two.

  1. radixThe default value is10? The answer:not.radixWill also considerstringParameter, ifstring 以 0x(0X)At the beginning,radix 为 16; If the0At the beginning, different browsers may have different values; The rest of the situationradix 为 10
  2. In which case the return value isNaN?
    • radixValue is less than2Or greater than36
    • All the converted digits in the string to be converted are not less than or equal toradixValue (e.g.parseInt('345', 2))
    • The first non-space character cannot be converted to a number (e.gparseInt('a123'))

Surprise three: Radix parameters elicit interview questions

3.1 [‘ 1 ‘, ‘2’, ‘3’). The map (parseInt)

The map function performs a callback on each element of the array and returns a new array containing the result of the operation.

// val is an array value
// index is the current array index
// _arr is the current array
arr.map((val, index, _arr) = > {});
Copy the code

So [‘1’, ‘2’, ‘3’].map(parseInt) is equivalent to the following code:

[parseInt("1".0), parseInt("2".1), parseInt("3".2)];
Copy the code

  1. ParseInt (“1”, 0) conforms to 2.1, radix is 0, and string starts with character 1, radix value is 10, value is 1.

  2. ParseInt (“2”, 1) conforms to 2.2, radix is less than 2, return NaN

  3. ParseInt (“3”, 2) conforms to 2.3, all convertible numbers in the string to be converted are greater than the radix value, return NaN

[1, NaN, NaN]

[’10’, ’10’, ’10’, ’10’].map(parseInt)

With the above foundation, this problem is easy to understand, let’s translate this method equivalently:

[parseInt("10".0), parseInt("10".1), parseInt("10".2), parseInt("10".3)];
Copy the code

Equivalent to converting ’10’ to decimal, one, binary, and ternary, the result of the interview question is [10, NaN, 2, 3].

Surprise 4: The end of parseInt

In addition to the above mentioned surprises, the parseInt method also has some side effects that need to be noted:

  1. parseIntLeading and trailing whitespace are allowed. Leading and trailing whitespace are first removed from the string before conversion.
// Allow leading and trailing Spaces
parseInt("123"); / / 123

// Spaces in the middle will be treated as truncations
parseInt("123 456 "); / / 123
Copy the code
  1. parseIntYou can understand the plus and minus signs
parseInt("+ 123"); / / 123
parseInt("123"); / / - 123
// Can only understand the first sign and the second non-numeric character, so NaN is returned
parseInt("+ - 123"); // NaN
Copy the code
  1. useparseIntconversionBigIntLoss of accuracy

ParseInt converts BigInt to Number and loses precision in the process. This is because trailing non-numeric values, including “n”, are discarded.

let bigInt = 111111111111111111111111n;
parseInt(bigInt); / / 1.1111111111111111 e+23

let bigInt2 = 11n;
parseInt(bigInt2); / / 11
Copy the code

Post warehouse

Portal: A blog library for battleground packs

Don’t forget to order 🌟 for the small bag.

After the language

I am battlefield small bag, a fast growing small front end, I hope to progress together with you.

If you like xiaobao, you can pay attention to me in nuggets, and you can also pay attention to my small public number – Xiaobao learning front end.

All the way to the future!!

An early end to the epidemic will restore peace to the world