你不知道的parseInt

时间：2021-06-08 23:56:21
 

首先，请允许我抄袭一段你知道的parseInt

 你不知道的parseInt

以下节选自parseInt - JavaScript | MDN

实际上你连这些基础都没掌握

你不知道的parseInt

概述

parseInt() 函数将给定的字符串以指定基数（radix/base）解析成为整数。

语法

1
parseInt(string, radix);

参数

string
要被解析的值。如果参数不是一个字符串，则将其转换为字符串。字符串开头的空白符将会被忽略。
radix
一个2到36之间的整数值，用于指定转换中采用的基数。比如参数"10"表示使用我们通常使用的十进制数值系统。总是指定该参数可以消除阅读该代码时的困惑并且保证转换结果可预测。当忽略该参数时，不同的实现环境可能产生不同的结果。

描述

parseInt *函数，没有与任何对象关联。

parseInt 函数将第一个参数（字符串）解析并试图返回一个整数或者NaN（Not a Number）。如果结果不是NaN，那么返回值是把第一个参数看作是radix参数指定的进制下的数，然后把它转换成十进制的整数。例如：radix参数为10 将会把第一个参数看作是一个数的十进制表示，8 对应八进制，16 对应十六进制，等等。基数大于 10 时，用字母表中的字母来表示大于 9 的数字。例如十六进制中，使用 A 到 F。

如果 parseInt 遇到了不属于radix参数所指定的基数中的字符那么该字符和其后的字符都将被忽略。接着返回已经解析的整数部分。parseInt 将截取整数部分。开头和结尾的空白符允许存在，会被忽略。

在没有指定基数，或者基数为 0 的情况下，JavaScript 作如下处理：

  • 如果字符串 string 以"0x"或者"0X"开头, 则基数是16 (16进制).
  • 如果字符串 string 以"0"开头, 基数是8（八进制）或者10（十进制），那么具体是哪个基数由实现环境决定。ECMAScript 5 规定使用10，但是并不是所有的浏览器都遵循这个规定。因此，永远都要明确给出radix参数的值。
  • 如果字符串 string 以其它任何值开头，则基数是10 (十进制)。

如果第一个字符不能被转换成数字，parseInt返回NaN。

算术上，NaN 不是任何一个进制下的数。你可以调用isNaN来判断 parseInt 是否返回 NaN。NaN 参与的数学运算其结果总是 NaN。

将整型数值以特定基数转换成它的字符串值可以使用 intValue.toString(radix).

示例

例子：使用 parseInt

以下例子均返回15

1
2
3
4
5
6
7
8
parseInt("F", 16);
parseInt("17", 8);
parseInt("15", 10);
parseInt(15.99, 10);
parseInt("FXX123", 16);
parseInt("1111", 2);
parseInt("15*3", 10);
parseInt("12", 13);

以下例子均返回 NaN:

1
2
parseInt("Hello", 8); // Not a number at all
parseInt("546", 2);   // Digits are not valid for binary representations
 

以下例子均返回 -15：

1
2
3
4
5
6
7
8
9
parseInt("-F", 16);
parseInt("-0F", 16);
parseInt("-0XF", 16);
parseInt(-15.1, 10);
parseInt(" -17", 8);
parseInt(" -15", 10);
parseInt("-1111", 2);
parseInt("-15e1", 10);
parseInt("-12", 13);

下例中也全部返回 17，因为输入的 string 参数以 "0x" 开头时作为十六进制数字解释，而第二个参数假如经过 Number 函数转换后为 0 或 NaN，则将会忽略。

1
2
3
parseInt("0x11", 16);
parseInt("0x11", 0);
parseInt("0x11");

下面的例子返回 224

1
parseInt("0e0",16);
 

没有指定 radix 参数时的八进制解析

尽管 ECMAScript 3 已经不赞成这种做法，且 ECMAScript 5 已经禁止了这种做法，但是仍然有很多实现环境仍然把以 0 开头的数值字符串（numeric string）解释为一个八进制数。下面的例子可能返回八进制的结果，也可能返回十进制的结果。总是指定一个基数（radix）可以避免这种不可靠的行为。

1
2
parseInt("0e0"); // 0
parseInt("08"); // 0, '8' is not an octal digit.

ECMAScript 5 移除了八进制解析

ECMAScript 5 规范不再允许parseInt函数的实现环境把以0字符开始的字符串作为八进制数值。ECMAScript 5 陈述如下：

The parseInt function produces an integer value dictated by interpretation of the contents of the string argument according to the specified radix. Leading white space in string is ignored. If radix is undefined or 0, it is assumed to be 10 except when the number begins with the character pairs 0x or 0X, in which case a radix of 16 is assumed. If radix is 16, number may also optionally begin with the character pairs 0x or 0X.

这与ECMAScript 3有所不同，ECMAScript 3仅仅是不提倡这种做法但并没有禁止这种做法。

直至2013年，很多实现环境并没有采取新的规范所规定的做法, 而且由于必须兼容旧版的浏览器，所以永远都要明确给出radix参数的值.

一个更严格的解析函数

有时采用一个更严格的方法来解析整型值很有用。此时可以使用正则表达式：

1
2
3
4
5
6
7
8
9
10
11
12
13
filterInt = function (value) {
   if(/^(\-|\+)?([0-9]+|Infinity)$/.test(value))
       return Number(value);
   return NaN;
}
console.log(filterInt('421'));               // 421
console.log(filterInt('-421'));              // -421
console.log(filterInt('+421'));              // 421
console.log(filterInt('Infinity'));          // Infinity
console.log(filterInt('421e+0'));            // NaN
console.log(filterInt('421hop'));            // NaN
console.log(filterInt('hop1.61803398875'));  // NaN
console.log(filterInt('1.61803398875'));     // NaN
 
 好，看完上面的内容大部分小伙伴都觉得掌握了parseInt(),下面出一道考题考一下。

你不知道的parseInt

 
What is the result of this expression? 
 
["1""2", "3"].map(parseInt)
["1", "2", "3"][1, 2, 3][0, 1, 2]other
答案解析：
what you actually get is [1, NaN, NaN] because parseInt takes two parameters (val, radix) and map passes 3(element, index, array)
这道题的正确答案是[1,NaN,NaN],只要弄清楚数组的map方法传给回调函数parseInt的参数就很容易顿悟，map函数传递的三个参数，回调函数会使用前两个参数，第一项为某一项元素，第二项为该元素下标索引。上述的表达式等价于
1
2
3
parseInt("1",0);//1，前面说过基数为0时的处理情况（请回头看）
parseInt("2",1);//NaN,在1进制里2不是有效数字，有效数字只有0
parseInt("3",2);//NaN,在二进制里3不是有效数字
 
所以你觉得我是真的掌握了parseInt(),看下面的例子：
  1. console.log(parseInt(0.000001));
  2. console.log(parseInt(0.0000001));
所以你觉得输出会是什么呢：
            第一条语句输出 0, 第二条语句输出 1
细心的你有没有发现这里传给parseInt的参数并不是字符串而是一个浮点数。
查看ECMA规范

你不知道的parseInt

规范中介绍了执行该函数的第一步是将参数转换成字符串，通过调用toString方法。

1
2
console.log(0.000001.toString());//0.000001
console.log(0.0000001.toString());//1e-7
对于小于 1e-6 的数值来说，ToString 时会自动转换为科学计数法。现在你知道上面结果是如何产生的了！
2016年6月19日续
你不知道的parseInt
 
 

趁热打铁，我们再看一个例子：

1
parseInt("010");
前面提到过ES5取消了八进制自动解析，所有其结果根据浏览器版本会有区别：标准浏览器中(默认支持ES5)，输出10，IE8和IE8以下是输出8;

下面我们不传入字符串而是传入8进制字面量

1
parseInt(010);//8

前面我们知道参数首先要调用toString()方法.

1
console.log(010.toString());//8
所以在所有的浏览器中上式都是8.
针对八进制的解析小结：非严格模式的下:
1.在IE9或者IE9以上还有其他标准浏览器中，如果参数是字符，并不会对其进行八进制转换，如果参数是八进制字面量，从最终结果看是按照八进制方式进行了转换。
2.在IE8和IE8以下浏览器中，无论传入的是字符串还是八进制字面量，都会按照八进制方式进行转换。
现在我们看下一严格模式下的情况：
1.如果参数是字符，严格模式下和非严格模式下是相同的，都是按照相应的ES版本解析。

2.如果参数是八进制字面量

1
2
"use strict"
console.log(parseInt(010));//IE9及以下不支持严格模式，解析为8，IE10及以上解析会出错：strict 模式下不允许使用八进制数字参数和转义字符
 
 

相关文章