当前位置：网站首页>You don't know parseInt?

You don't know parseInt?

2022-04-21 10:32:00 【InfoQ】

Preface

parseInt
  Used to parse a string and return a decimal integer of the specified cardinality , Use the syntax  
parseInt(string, radix)
.
radix
  Represents the cardinality of the string , The value is  
2 ~ 36
.

mention  
parseInt
 , I can't help thinking of two things , The first is  
parseInt
  Truncation usage of ; The second is the rotten street  
['1', '2', '3'].map(parseInt)
  Interview questions . Especially the latter interview question , At first, it was a haunting nightmare . But this is really  
parseInt
  All of it ？ Let's explore with Xiaobao  
parseInt
  Let's have a lot of surprises .

Surprise one : parseInt (0.0000005) === 5  by  true, Big doubts ？

Little head , Big doubts ,
parseInt
  Why is the converted number  
5
  Na , Should not be  
0
  Do you ？( Note that the passed in parameter is
Floating point type
, It's not a string )

Let's take a look  
MDN
  Yes  
parseInt
  Explanation of grammar : 
parseInt
  Method receives the value of two parameters to be parsed  
string
, base  
radix
.
string
  If the parameter is not a string , It will be called  
toString
  Method to string . Therefore, a non string resolved value was encountered ,
parseInt
  There will be two operations inside :

Step1:  call  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'

Note the output above , We can find that when the number is too small ,
toString
  The output is in the form of scientific counting .

Step2:  Truncation operation

Quote a passage from  
StackOverflow
  The explanation of :<br> parseInt  Only the leading part of the string can be interpreted as an integer value ; It ignores any unit of code that cannot be interpreted as an integer , And there will be no ignoring instructions .

So the answer will only return  
5
 , The rest  
e-7
  Be ignored .

matters needing attention :

If you put the value to be parsed into a string , Then the above surprise will not appear ：

parseInt(&quot;0.0000005&quot;); // 0
parseInt(&quot;0.000000005&quot;); // 0

From this surprise, we can gain a warning ： Avoid implicit type conversions whenever possible .

Expand

The number is too small , call  
toString
  Method , Will return the scientific and technological law format representation ; When the number is too large , There will also be a similar situation .

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

But the packet found some critical values during the test , Strange , If you are interested, you can discuss .

// 10000000000000000
parseInt(9999999999999999)

Surprise two ：radix  The default value is  10  Do you , In which case the return value is  NaN？

Now let's analyze this surprise in several cases ：

2.1 radix  The value is  undefined、0  Or unspecified

When  
radix
  The value is  
undefined、0
  Or unspecified , that  
JavaScript
  How to deal with this situation :

  • If you enter  
    string
      With  
    0x
      or  
    0X
      start , that  
    radix
      Will be assumed to be  
    16
     , The rest of the string is parsed in hexadecimal .
  • If you enter  
    string
      With  
    0
      start ,
    ES5
      The decimal system is specified , But not all browsers support , Therefore use  
    parseInt
      when , You need to specify the  
    radix
  • If you enter  
    string
      Start with any other value ,
    radix
      The value is  
    10

We use it  
google
  The browser experiences the above rules .

parseInt(&quot;0x16&quot;); // 22
parseInt(&quot;0888&quot;); // 888
parseInt(&quot;123px&quot;); // 123

2.2 radix  Less than  2  or   Greater than  36

radix
  The value of the parameter is  
2 ~ 36
, When  
radix
  Less than  
2
  or   Greater than  
36
( It doesn't contain  
0
), The return value is  
NaN

parseInt(&quot;123px&quot;, 1); // NaN
parseInt(&quot;123px&quot;, 38); // NaN
parseInt(&quot;123px&quot;, -1); // NaN

2.3  In the string to be converted , All convertible numbers are not less than  radix  value

Take a chestnut :  for example  
radix
  The value is  
2
 ( Binary system ), The string to be converted is  
'3456'
, Only binary  
0、1
  It's the basic operator , So strings  
'3456'
  Cannot convert to binary , The return value is  
NaN
.

parseInt(&quot;3456&quot;, 2); // NaN
parseInt(&quot;45px&quot;, 3); // NaN

2.4  summary

After learning the above situations , We can answer the question of surprise two .

  • radix
      The default value is  
    10
      Do you ？ answer : 
    No
    ,
    radix
      And think about  
    string
      Parameters , If  
    string
      With  
    0x(0X)
      start ,
    radix
      by  
    16
    ; If the  
    0
      start , Different browsers may have different values ; Other cases  
    radix
      by  
    10
  • In which case the return value is  
    NaN
    ？
  • radix
      Less than  
    2
      or   Greater than  
    36
  • In the string to be converted , All convertible numbers are not less than  
    radix
      value ( for example  
    parseInt('345', 2)
    )
  • The first non space character cannot be converted to a number ( for example  
    parseInt('a123')
    )

Surprise three ：radix  Parameter leads to the interview question

3.1 ['1', '2', '3'].map(parseInt)

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

// val  Is an array value
// index  Index the current array
// _arr  For the current array
arr.map((val, index, _arr) => {});

therefore  
['1', '2', '3'].map(parseInt)
  It is equivalent to the following code :

[parseInt(&quot;1&quot;, 0), parseInt(&quot;2&quot;, 1), parseInt(&quot;3&quot;, 2)];

  • parseInt(&quot;1&quot;, 0)
    accord with  
    2.1
    ,
    radix
      by  
    0
    , And  
    string
      In characters  
    1
      Start ,
    radix
      The value is  
    10
    , The value is  
    1
    .
  • parseInt(&quot;2&quot;, 1)
    accord with  
    2.2
     ,
    radix
      Less than  
    2
    , return  
    NaN
  • parseInt(&quot;3&quot;, 2)
    accord with  
    2.3
    , In the string to be converted , All convertible numbers are greater than  
    radix
      value , return  
    NaN

So the answer to this interview question is  
[1, NaN, NaN]

3.2 ['10', '10', '10', '10'].map(parseInt)

With the above foundation , This topic is easy to understand , Let's transform this method into :

[parseInt(&quot;10&quot;, 0), parseInt(&quot;10&quot;, 1), parseInt(&quot;10&quot;, 2), parseInt(&quot;10&quot;, 3)];

Is equivalent to  
'10'
  Convert to decimal , One base , Binary system , Ternary , So the result of this interview question is  
[10, NaN, 2, 3]
.

Surprise four ：parseInt  Terminal segment of collateral branch

parseInt
  In addition to the surprises mentioned above , There are also some side branches and end sections , You need to pay attention :

  • parseInt
      Allow leading and trailing spaces , Before conversion , The leading and trailing spaces of the string will be deleted first .

//  Allow leading and trailing spaces
parseInt(&quot; 123 &quot;); // 123

//  The space in the middle will be treated as a truncater
parseInt(&quot;123 456 &quot;); // 123

  • parseInt
      You can understand the sign

parseInt(&quot;+123&quot;); // 123
parseInt(&quot;-123&quot;); // -123
//  You can only understand the first sign , The second non numeric character , Therefore return  NaN
parseInt(&quot;+-123&quot;); // NaN

  • Use  
    parseInt
      transformation  
    BigInt
      Loss of accuracy

parseInt
  take  
BigInt
  Convert to  
Number
, And lost accuracy in the process . This is because the trailing non numeric value , Include  
&quot;n&quot;
, Will be discarded .

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

let bigInt2 = 11n;
parseInt(bigInt2); // 11

Blog warehouse

Portal : 
Battlefield bag's Blog Library

Don't forget to order a for the bag  .

Afterword

I am a &nbsp;
Battlefield bag
&nbsp;, A rapidly growing small front end , I hope I can make progress with you .

If you like small bags , Can be in &nbsp;
InfoQ
  Pay attention to me , You can also focus on my little official account. ——
Small bag learning front end
.

Come on all the way , Rush to the future !!!

An early end to the epidemic   Peace has returned to the world

版权声明
本文为[InfoQ]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204211030458606.html

边栏推荐

猜你喜欢

随机推荐