Fix the weird behavior of parseInt()

Author: Joe Seifi
Translator: Frontend Xiaozhi
Author: Dmitri Pavlutin

If you have dreams and dry goods, search on [Great Move to the World] Follow this brushing wit who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

parseInt() is a built-in JS function for parsing integers in numeric strings. For example, to parse the numeric string '100' :

const number = parseInt('100');
number; // 100

As expected, '100' is parsed as the integer 100 .

parseInt(numericalString, radix) also accepts a second parameter: from 2 to 36, which represents the base of the string. For example, specifying 16 means that the parsed value is a hexadecimal number. Please note that 10 is not the default value , the most common are 2, 8, 10, and 16.

For example, we use parseInt to parse digital strings in binary mode:

const number = parseInt('100', 2);
number; // 4

The binary number corresponding to 100 is 4, so 4 is returned.

1. Weird behavior of parseInt()

parseInt(numericalString) always converts its first parameter to a string (if it is not a string), and then parses the numeric string into an integer value.

This is why you can ( but not ) use parseInt() extract the integer part of a floating point number:

parseInt(0.5);      // => 0
parseInt(0.05);     // => 0
parseInt(0.005);    // => 0
parseInt(0.0005);   // => 0
parseInt(0.00005);  // => 0
parseInt(0.000005); // => 0

Extract the integer part of the floating point number, such as 0.5 , 0.05 etc., and the result is 0 , which is as expected.

How about extracting the integer part of 0.0000005

parseInt(0.0000005); // => 5

parseInt() the floating point number 0.0000005 into 5 . Why does parseInt(0.0000005) have such a weird behavior?

2. Solve the weird behavior of parseInt()

Let's take a look at parseInt(numericalString) : if it is not a string, convert it to a string, then parse it, and return the parsed integer.

This may be the first clue.

Then, we try to manually convert the floating-point number to a string representation:

String(0.5);      // => '0.5'
String(0.05);     // => '0.05'
String(0.005);    // => '0.005'
String(0.0005);   // => '0.0005' 
String(0.00005);  // => '0.00005'
String(0.000005); // => '0.000005'

String(0.0000005); // => '5e-7'

The behavior of an explicit conversion to a string(0.0000005) different from other floating-point numbers: its representation is in the form of an exponent.

This is the second important clue!

When the exponent symbol is parsed as an integer, we will get the number 5

parseInt(0.0000005); // => 5
// same as
parseInt(5e-7);      // => 5
// same as
parseInt('5e-7');    // => 5

parseInt('5e-7') considers the first number '5' , but skips 'e-7' .

The mystery has been solved! Because parseInt() always converts its first parameter to a string, 10 minus 6 will be expressed as exponents. Then parseInt() extracts the integer from the exponential representation of the float.

In addition, in order to safely extract the integer part of a floating-point number, it is recommended to use the Math.floor() function:

Math.floor(0.5);      // => 0
Math.floor(0.05);     // => 0
Math.floor(0.005);    // => 0
Math.floor(0.0005);   // => 0
Math.floor(0.00005);  // => 0
Math.floor(0.000005); // => 0

Math.floor(0.0000005); // => 0

3. Summary

parseInt() is a function that parses a string of numbers into integers.

You must be careful when trying to extract the integer part of a floating point number parseInt()

Floating point numbers less than 10 to the power of 6 (for example, 0.0000005, that is, 5*10-7) are written in exponential notation when converted into a string (for example, 5e-7 is the exponential notation of 0.0000005). This is why parseInt() can lead to unexpected results: only the important part of the exponent (such as 5e-7 in 5 ) will be parsed.

So now everyone can try to explain why parseInt(999999999999999999999) is equal to 1?

~End, I’m Shuwanzhi, go to health care, see you next time~

---

code is deployed, the possible bugs cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

Original: https://dmitripavlutin.com/parseint-mystery-javascript/

communicate with

If you have dreams and dry goods, search on for 160a46319ef8b0 [Great Move to the World] Follow this brushing wisdom who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.