你可能不知道的parseInt

parseInt

parseInt(021) 
parseInt('021') 
parseInt('021', 8) 

定义

parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数， radix 是2-36之间的整数，表示被解析字符串的基数。

注意点

• 解析的目标值是字符串，如果不是的话，会先进行toString转换(默认转换为十进制)，如果不能转换为数字，返回NaN

• 返回值是一个十进制整数 或者 NaN

• 在任何情况下都最好指定基数，范围是2-36

• 如果 parseInt遇到的字符不是指定 radix参数中的数字，它将忽略该字符以及所有后续字符，并返回到该点为止已解析的整数值。 parseInt 将数字截断为整数值。 允许前导和尾随空格。

  parseInt("15e2", 10); //15
  parseInt("15px", 10); //15
  parseInt(4.7, 10); //4
  parseInt(4.7 * 1e22, 10); // 非常大的数值变成 4
  parseInt(0.00000000000434, 10); // 非常小的数值变成 4
  

  如果 radix 是 undefined、0或未指定的

  0. 在解析以0开头的字符串时，有很多实现环境仍然把以 0 开头的数值字符串（numeric string）解释为一个八进制数，但ECMAScript 5 已经禁止了这种做法

  parseInt("0e0");
  // 0
  ​
  parseInt("08");
  // 8
  

  2. 如果输入的 string以 "0x"或 “0x”（一个0，后面是小写或大写的X）开头，那么radix被假定为16，字符串的其余部分被当做十六进制数去解析

有趣的例子

['10','10','10','10','10'].map(parseInt);
// [10, NaN, 2, 3, 4]

了解了上述知识，再来看这个例子其实会容易很多，map中的回调函数需要三个参数，currentValue 是callback 数组中正在处理的当前元素。 index可选, 是callback 数组中正在处理的当前元素的索引。 array可选, 是callback map 方法被调用的数组。

而正好parseInt函数也可以接收两个参数，一个是目标值string, 另一个是基数radix,也就是说对于目标数组中的每一个数，其本身被当作parseInt中的第一个参数，其索引值被当作了parseInt的第二个参数，也就是基数radix.

上面那个例子其实可以写成这样：

['10','10','10','10','10'].map((num, index) => {
    return parseInt(num, index)
});
// [10, NaN, 2, 3, 4]
// 对于第一个数： 基数为0，将num当成十进制解析
// 对于第二个数， 基数为1， 返回NaN
// 对于第三个数， 基数为2， 将num当成二进制解析
// ..... 同上

自测

parseInt(021)  //17
// (021).toString() -->  '17' --> 17
parseInt('021') //21
//未指定radix, 默认radix=10
parseInt('021', 8) //17
//指定 radix=8
​
​
// 返回15
parseInt("0xF", 16);
parseInt("17", 8);
parseInt(021, 8);
parseInt("015", 10);   // parseInt(015, 8); 返回 13
parseInt(15.99, 10);
parseInt("15,123", 10);
parseInt("FXX123", 16);
parseInt("1111", 2);
parseInt("15 * 3", 10);
parseInt("15e2", 10);
parseInt("15px", 10);
​
//返回NaN
parseInt("Hello", 8); // 根本就不是数值
parseInt("546", 2);   // 除了“0、1”外，其它数字都不是有效二进制数字
​
//返回-15
parseInt("-F", 16);
parseInt("-0XF", 16);
parseInt(-15.1, 10);
parseInt(" -17", 8);
parseInt("-1111", 2);
parseInt("-15e1", 10);
parseInt("-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

Why is parseInt(021, 8) === 15?