小小千想和您聊一聊

当前位置: 首页> 技术分享> web前端教程之parseInt函数

web前端教程之parseInt函数

关于JS的手动类型转换,parseInt是我们最早接触的函数之一。

接下来我们详细的总结一下它的用法,你可以点击收藏,以备不时之需。


parseInt()

作用是将参数(通常为字符串)强制转换为整数。


它有两个参数,第二个可以省略,我们先展示常见的用法

1. 转换规则:依次将字符串中从左到右的数字部分转为整数,一旦转换失败,返回NaN。

(1) 参数是字符串类型:

var a = parseInt(10); //将字符串转成整数类型 console.log(a); // 10  var b = parrseInt(10true); //将有效数字部分转为整数,提取开头数字部分 console.log(b); // 10  var c = parseInt(10true20); //只将开头有效部分转为整数 console.log(c); //10  var d = parseInt(045zoo); //开头部分转为整数,数字前面的0省略 console.log(d); //45  var f = parseInt(34.5); //整数部分,小数点非数字部分,舍去 console.log(f); //34  var g = parseInt(a3); //若不是以数字开头,转为NaN(Not a Number 不是数字)的特殊数值 console.log(g); //NaN 

(2) 参数是数字类型:

var a = parseInt(3.4); //依然转为数字,但是取整 console.log(a); //3 

(3) 其它数据类型:只要开头不包含有效数字,结果都转为NaN

var a = parseInt(true); console.log(a); //NaN  var b = parseInt(null); console.log(b); //NaN  var c = parseInt(undefined); console.log(c); //NaN  var d = parseInt([]); console.log(d); //NaN  var e = parseInt({}); console.log(e); //NaN 


接下来,我们看第二个参数的用法

第二个参数:表示进制,范围2~36(用来说明第一个参数的进制规则)
var a = parseInt(99,10); // 如果字符串为十进制内容,该参数可省略  console.log(a); // 99  var a = parseInt(1001,2); // ‘1001’ 符合二进制规则, 转为十进制整数  console.log(a); // 9  var a = parseInt(1001,10); // ‘1001’同样符合十进制, 转为十进制整数  console.log(a); // 1001  var b = parseInt(234,2); //‘234’不符合二进制的规则  console.log(b); // NaN  var b = parseInt(abcde,2); //‘abcde’不符合二进制的规则  console.log(b); // NaN  var c = parseInt(1022,2); //‘10’部分属于二进制,但‘22’不是,将开头有效的部分提取并转成十进制  console.log(c); //2 


一些特殊说明

如果以0x或0X开头,即使不说明进制规则,也能识别
var e = parrseInt(0xa); //0x是十六进制的表示方法,a是十六进制中的10,转换成整数后自动切换为十进制 console.log(e); //10 
尽量不使用出现e的数字,由于只能识别开头部分,会造成结果混乱
此时应使用parseFloat方法替代
parseInt("6.022e23", 10); // 返回 6 parseInt(6.022e2, 10); // 返回 602 
非常大或非常小的数字
parseInt(4.7 * 1e22, 10); // 非常大的数值变成 4 parseInt(0.00000000000434, 10); // 非常小的数值变成 4 
在最新的ES5规范中,以0开头的数字,已经不能再被识别为八进制了。
parseInt("011"); //会当成10进制转换为   11 parseInt("011", 8) //指定了8进制,结果为  9 

总结:

以上测试均来自最新版的chrome浏览器,并不能确保所有浏览器行为一致。为了保证开发中不出现意外,建议使用parseInt方法时,一律带上第二个参数

上一篇:web前端教程之函数防抖

下一篇:web前端教程之重复的ajax请求

QQ技术交流群

HTML5/Web前端锋迷群
712051083

加入群聊

用户登录

手机号:

密码:

图形验证码:

点击切换

用户注册

手机号:

登录密码:

图形验证码:

点击切换

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

手机号:

图形验证码:

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

新密码:

确认新密码:

获取课程

添加小千老师微信,获取课程信息

如何获取课程?

一、需拥有此本教材

如没有,可点击下方入口购买当当购买入口京东购买入口

二、添加小千老师,发送拥有凭证,解锁课程资源

1.购买该教材的订单信息
2.拥有的实体书信息等

更换手机号

新手机号:

图形验证码:

短信验证码:

获取验证码