Js中parseInt的使用及注意事项

 更新时间:2023年01月03日 10:50:43   作者:lazy_tomato  
parseInt是一种字符串转数字的,下面这篇文章主要给大家介绍了关于Js中parseInt的使用及注意事项的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

start

先看一个题目['1','2','3'].map(parseInt)

乍一看,我写下答案:[1,2,3]

控制台运行:['1',NaN,NaN]

为什么?map函数我很熟悉了,那么问题出在哪里?大概率出在 parseInt上了

回顾一下map

map() 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。总共就两个参数,一个是回调函数,一个是指定对应的this。

1.第一个参数:回调函数

var newArr = [1, 2, 3].map((item, index, arr) => {
  console.log(item, index, arr)
  return item * 2
})
/* 
1 0 [ 1, 2, 3 ]
2 1 [ 1, 2, 3 ]
3 2 [ 1, 2, 3 ]
*/

console.log(newArr) // [ 2, 4, 6 ]

回调函数的三个参数依次为:1.当前正在处理的元素;2.当前元素的索引;3.调用map的数组;

2.第二个参数:指定this

var obj = { name: 'obj对象' }

var newArr = [1, 2, 3].map(function (item, index, arr) {
  return item * 2 + this.name
}, obj)

console.log(newArr) // [ '2obj对象', '4obj对象', '6obj对象' ]

这里稍微注意下,这里不能使用箭头函数的形式,因为箭头函数的this没有自己的this对象,内部的this就是定义时上层作用域中的this。

学习一下 parseInt

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

怎么理解:

  • 将一个字符串A转换成数字B;
  • 第一个参数:需要转换的字符串A;
  • 第二个参数:表示进制的基数(用我自己的大白话讲就是:解析字符串A的时候,把A当做多少进制的数字。)

正常的使用:

console.log(parseInt('10')) // 10
console.log(parseInt('10a')) // 10

console.log(parseInt('111', 2)) // 7
console.log(parseInt('A12', 16)) // 2578

注意事项:

对于 parseInt 第一个参数。如果参数不是一个字符串,则将其转换为字符串 (使用 ToString抽象操作)。字符串开头的空白符将会被忽略。

对于 parseInt 第二个参数。从 236 的整数,表示进制的基数。例如指定 16 表示被解析值是十六进制数。如果超出这个范围,将返回 NaN。假如指定 0 或未指定,基数将会根据字符串的值进行推算。注意,推算的结果不会永远是默认值 10!文章后面的描述解释了当参数 radix 不传时该函数的具体行为。

1. 第一个参数如果不是字符串,会被转换为字符串,且开头空白符会被忽略。

console.log(parseInt(10)) // 10
console.log(parseInt('            10')) // 10
console.log(parseInt('  11   22')) // 11 /* 如果字符之间有空格,读取第一个 */	

2. 第二个参数,取值范围为 2-36 的整数,如果超出这个范围,将返回 NaN

console.log(parseInt('10', 1)) // NaN
console.log(parseInt('10', 2)) // 2
console.log(parseInt('10', 36)) // 36
console.log(parseInt('10', 37)) // NaN

3. 第二个参数假如指定 0 或未指定,基数将会根据字符串的值进行推算。

console.log(parseInt('10')) // 10
console.log(parseInt('010')) // 10   /* 某些浏览器这里会解读成 8进制 */
console.log(parseInt('ox10')) // NaN


/* 第二个参数如果是字符串,会被尝试读取数字 */
console.log(parseInt('10', '36')) // 36

/* **我实践的结果:** 第二个参数如果是字符串,会被尝试读取数字,无法读取,默认基数将会根据字符串的值进行推算*/
console.log(parseInt('10', '7tamato')) // 10
console.log(parseInt('10', 'tamato7')) // 10
console.log(parseInt('0x10', 'tamato7')) // 16

估算的方式:

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

4. 解析的字符串包含的数字超过 基数,返回NaN

console.log(parseInt('3', 2)) // NaN
console.log(parseInt('4', 3)) // NaN
console.log(parseInt('1324', 3)) // NaN

5. 小数点后超过7位

console.log(parseInt(0.000005)) // 0
console.log(parseInt(0.0000005)) // 5

/* 原因是 0.0000005 不是字符串,会被toString() => 5e-7 */
console.log((0.0000005).toString()) // 5e-7

回到初始的问题

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

可以理解成这样:

parseInt('1',0,['1','2','3'])
parseInt('2',1,['1','2','3'])
parseInt('3',2,['1','2','3'])
  • parseInt没有第三个参数,所以可以忽略。
  • 基数为0 => 默认10进制
  • 解析的字符串包含的数字超过基数,返回NaN

所以答案:[1,NaN,NaN]

总结:

由于 parseInt 第二个参数的推算并不稳定,所以建议在使用 parseInt 的时候第二个参数也添加上。

再捋捋解析规则:

  • 第一个参数默认为字符串类型,不是字符串类型,会被 toString;如果字符串无法解析,直接返回NaN;
  • 第二个参数指定为 0 或未指定,会根据第一个参数的格式,进行推断。基数的取值范围为 2-36;基数超出范围NaN;

来都来了

来都来了,顺便看一下和parseInt 比较相似的parseFloatparseFloat比较简单,只有一个参数,就是需要解析的字符串。

对于 BigInt 类型的数据,使用 parseInt和 parseFloat 转换BigInt类型的数据,都会存在精度丢失的情况,需要注意下。

end

其实这道题目就是考察,对 parseInt 方法的熟悉程度。

总结

到此这篇关于Js中parseInt的使用及注意事项的文章就介绍到这了,更多相关Js parseInt使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript输出为[object Object]问题的解决办法

    JavaScript输出为[object Object]问题的解决办法

    平时我们在接收后端返回的json对象通常是一个字符串类型的object,所以一般我们要对这个object进行类型转化后,我们才能使用object里面的数据,这篇文章主要给大家介绍了关于JavaScript输出为[object Object]问题的解决办法,需要的朋友可以参考下
    2023-11-11
  • ToolTip 通过Js实现代替超链接中的title效果

    ToolTip 通过Js实现代替超链接中的title效果

    ToolTip 通过Js实现代替超链接中的title效果,需要的朋友可以参考下。
    2011-04-04
  • 微信小程序实现选择地址省市区三级联动

    微信小程序实现选择地址省市区三级联动

    这篇文章主要为大家详细介绍了微信小程序实现选择地址省市区三级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 微信小程序授权登录及解密unionId出错的方法

    微信小程序授权登录及解密unionId出错的方法

    这篇文章主要介绍了微信小程序授权登录及解密unionId出错的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 纯JavaScript实现的分页插件实例

    纯JavaScript实现的分页插件实例

    这篇文章主要介绍了纯JavaScript实现的分页插件,涉及javascript结合php动态实现分页效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • uniapp添加操作日志的方法(uniapp、日志、文件、html5+)

    uniapp添加操作日志的方法(uniapp、日志、文件、html5+)

    近期一直在写微信小程序,有一个问题一直没有解决,就是在测试环境中调试代码会打印很多日志,方便看到问题所在,这篇文章主要给大家介绍了关于uniapp添加操作日志(uniapp、日志、文件、html5+)的相关资料,需要的朋友可以参考下
    2023-11-11
  • 微信小程序 自定义弹窗实现过程(附代码)

    微信小程序 自定义弹窗实现过程(附代码)

    这篇文章主要介绍了微信小程序 自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • 浅谈js数组和splice的用法

    浅谈js数组和splice的用法

    下面小编就为大家带来一篇浅谈js数组和splice的用法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • Servlet实现文件上传,可多文件上传示例

    Servlet实现文件上传,可多文件上传示例

    本篇文章主要介绍了Servlet实现文件上传,可多文件上传示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • JS 验证码功能的三种实现方式

    JS 验证码功能的三种实现方式

    这篇文章主要介绍了验证码功能的三种实现方式,分为数字短信验证码,图形验证码,滑动验证码,本文通过示例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11

最新评论