Skip to content

JS parseInt 方法详解及常见问题

Published: at 01:38 PMSuggest Changes

问题

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

求上面的返回值

翻车

控制台一敲结果是 [1, NaN, NaN]

这车翻的太丢人了?Mark 一下

竟然还有人问为啥

熟读文档:

补充一下:

实际上这是对 map 方法回调函数的第二个参数和 parseInt 的第二个参数是进制

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

的执行过程是

parseInt('1', 0); // 1
parseInt('2', 1); // NaN
parseInt('3', 2); // NaN

还问

parseInt('19', 7); // 1
parseInt('91', 7); // NaN

第一个问题有人回答是0 进制,我直接???

答案其实文档中有,我已经分别加粗了

对于 parseInt(string, radix)

如果 radix 是 undefined、0 或未指定的,JavaScript 会假定以下情况

  1. 如果输入的 string 以 “0x”或 “0x”(一个 0,后面是小写或大写的 X)开头,那么 radix 被假定为 16,字符串的其余部分被当做十六进制数去解析。
  2. 如果输入的 string 以 “0”(0)开头,radix 被假定为 8(八进制)或 10(十进制)。具体选择哪一个 radix 取决于实现。ECMAScript 5 澄清了应该使用 10 (十进制),但不是所有的浏览器都支持。因此,在使用 parseInt 时,一定要指定一个 radix。
  3. 如果输入的 string 以任何其他值开头,radix 是 10 (十进制)。

如果第一个字符不能转换为数字,parseInt 会返回 NaN。

群友疑惑

parseInt(4,4) 为啥是 NaN parseInt(10, 9) 为啥是 9 10 的 9 进制是 9?

第一个问题,看文档:parseInt 函数将其第一个参数转换为一个字符串,对该字符串进行解析,然后返回一个整数或 NaN。

第二个问题是进制基础

顺便贴一下群友发的 B 站大学教程:关于进制的全部

parseInt(10, 9) // 9 + 0 = 9
parseInt(12,4) // 4 + 2 = 6
parseInt(0,4) // 0
parseInt(3,4) // 3
parseInt(4,4) // NaN
parseInt(11,4) // 4 + 1 = 5
parseInt(13,4) // 4 + 3 = 7
parseInt(23,4) // 4 * 2 + 3 = 11

大佬表演

群里有个德国巨佬 可爱的 kiochan(他说不贴他 github 就要打我) 冒泡贴了一段代码,叹为观止,果然是群除我佬。

console.table(new Array(20).fill(0).map((v, i) => new Array(20).fill(i).map((_v, _i) => _i >= 2 && _v.toString(_i))))

输出结果


Previous Post
深入理解 CSS 中的块格式化上下文 (BFC)
Next Post
CSS 鼠标悬停光标变化