深入理解JS中Number(),parseInt(),parseFloat()三者比较


Posted in Javascript onAugust 24, 2018

参考阅读:

在项目开发中我们经常会用到转型方法,尤其是JS这种松散型的语言。其中比较常用的方法就是Number()方法和ParseInt()/ParseFloat()方法了,下面我们分别对这几种方法的转型机制进行详细地说明。具体内容详情如下所示:

【正文内容】

Number()

-------------------------------------------------------------------------------------
--Number()
--
--
--Boolean值,true和false值将分别被转为1和0。
--
--数字值,整型就是整型,浮点型就是浮点型,科学计数就科学计数
--
--null值,转为0
--
--二进制,八进制,十六进制格式,转为十进制的数值
--
--字符串为空,转为0
--
--字符串中是纯科学计数,数值会直接转为十进制的数值
--
--undefined , 对象 , 数组 ,字符串不为纯数字和科学计数时 返回NaN

------------------------------------------------------------------------------------ 

 //JS区分0和-0
 var num = 123;
 var num = 123.123;
 var num = 0b10;
 var num = 010;
 var num = 0xff;
 var num = 5e2;
 var num = 5e-2;
 var num = NaN;
 console.log('值: ' , num);
 console.log('类型: ' , typeof(num))
 //NaN本身为false
 //其他类型转为数值失败时都为NaN
 console.log(NaN - 100);
 if(NaN){
  console.log('Yes');
 }else{
  console.log('No');
 }
 //NaN
 var a = '123ad';
 //123
 var a = '123';
 //NaN
 var a = 'f3ad';
 //0
 var a = false;
 //1
 var a = true;
 //NaN
 var a = undefined;
 var a = new Object();
 var a = Array(1,23);
 //1e+124
 var a = 10e123;
 //3
 var a = 0b11;
 //255
 var a = 0xff;
 //1.23
 var a = 1.23;
 //0
 var a = '';
 //1200
 var a = '12e2';
 //0
 var a = null;
 //90
 var a = 0132;
 var n = Number(a);
 console.log(n);

parseInt()

----------------------------------------------------------------------------------------------------------------------------------------
--parseInt()
--
--
--数值正常转化,如果为浮点数,则转为整型,舍弃小数点后的数值
--
--字符串起始包含数字时则数字那段转为数值,后面舍弃
--
--二进制,八进制,十六进制转化时,转化为十进制的数值
--
--科学计数法,能解析时正常解析,不能时返回第一个数字
--
--Boolean,undefined , 对象 , 数组 ,空字符串,字符串开头不为纯数字和科学计数时 返回NaN
--
--parseInt()方法还有基模式,可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。
----------------------------------------------------------------------------------------------------------------------------------------       

//123
 var a = '123ad';
 //123
 var a = '123';
 //NaN
 var a = 'f3ad';
 //NaN
 var a = false;
 //NaN
 var a = true;
 //NaN
 var a = undefined;
 var a = new Object();
 //13 第一个值
 var a = Array(13,2);
 //3100000能够解析处时正常解析,不能时只返回第一个数字
 var a = 31e5;
 //3
 var a = 0b11;
 //255
 var a = 0xff;
 //1
 var a = 1.23;
 //NaN
 var a = '';
 //12 字符串只返回12e舍弃
 var a = '12e2';
 //NaN
 var a = null;
 //1
 var a = 1.5;
 //90
 var a = 0132;
 var n = parseInt(a);
 console.log(n);
 var a = parseInt("10",2);
 var a = parseInt("FF",16);
 var a = parseInt("10",8);
 console.log(a);

 parseFloat()

--------------------------------------------------------------------------------------------------------------------------------
--parseFloat()
--
--
--数值正常转化,整型为整型,浮点型为浮点型
--
--字符串起始包含数字时则数字那段转为数值,后面舍弃
--
--二进制,八进制,十六进制转化时,转化为十进制的数值
--
--科学计数法,能解析时正常解析,超出范围则返回Infinity
--
--Boolean,undefined , 对象 , 数组 ,空字符串,字符串开头不为纯数字和科学计数时 返回NaN
--
--不能有多个小数点报语法错误
--------------------------------------------------------------------------------------------------------------------------------       

//123
 var a = '123ad';
 //123
 var a = '123';
 //NaN
 var a = 'f3ad';
 //NaN
 var a = false;
 //NaN
 var a = true;
 //NaN
 var a = undefined;
 var a = new Object();
 //13 第一个值
 var a = Array(13,2);
 //3100000 范围过大将转为科学计数法再大将为Infinity
 var a = 31e5;
 //3
 var a = 0b11;
 //255
 var a = 0xff;
 //1.23
 var a = 1.23;
 //NaN
 var a = '';
 //1200
 var a = '12e2aa';
 //NaN
 var a = null;
 //1.5
 var a = 1.5;
 //90
 var a = 0132;
 //
 var a = 1.113;
 var n = parseFloat(a);
 console.log(n);

总结

以上所述是小编给大家介绍的深入理解JS中Number(),parseInt(),parseFloat()三者比较,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决
Nov 09 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
微信小程序支付PHP代码
Aug 23 #Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 #Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 #Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 #Javascript
React key值的作用和使用详解
Aug 23 #Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 #Javascript
从零开始学习搭建React脚手架项目
Aug 23 #Javascript
You might like
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
js Html结构转字符串形式显示代码
2011/11/15 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
学习Python需要哪些工具
2020/09/04 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
傲盾软件面试题
2015/08/17 面试题
家长对老师的评语
2014/04/18 职场文书
群教班子对照检查材料
2014/08/26 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
关于MySQL中的 like操作符详情
2021/11/17 MySQL
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS