JavaScript字符串转数字的5种方法及遇到的坑


Posted in Javascript onJuly 16, 2018

String转换为Number有很多种方式,我可以想到的有5种!

parseInt(num); // 默认方式 (没有基数)
parseInt(num, 10); // 传入基数 (十位数)
parseFloat(num) // 浮点数
Number(num); // Number 构造器
~~num //按位非
num / 1 // 除一个数
num * 1 // 乘一个数
num - 0 // 减去0
+num // 一元运算符 "+"

选择哪一种呢?什么时候选择它?为什么选择这种它?我们逐一进行分析,并解析每种方式的常见陷阱。

parseInt

根据JsPerf.com的基准测试,大多数浏览器对parseInt的响应最佳。虽然它是最快的方式,但使用preseInt会碰到一些常见陷阱:

parseInt('08') // returns 0 部分老浏览器.
parseInt('44.jpg') // returns 44

parseInt: 没有传入基数时,默认是传入的基数为10 parseInt(num, 10),如果你不知道num属性的类型,不要使用parseInt进行字符串转数字。

parseFloat

如果你不解析16进制数,这是一个非常好的选择。例如:

parseInt(-0xFF) // returns -255
parseInt("-0xFF") // returns -255
parseFloat(-0xFF) // returns -255
parseFloat("-0xFF") // returns 0

注意:字符串中的负十六进制数字是一个特殊情况,如果你用parseFloat解析,结果是不正确的。为了避免程序出现NaN的情况,应该检查转化后的值。

parseFloat('44.jpg') // return 44

parseFloat: 转换十六进制数时要小心,如果你不知道要转换对象的类型,不要使用parseFloat。

按位非

可以把字符串转换成整数,但他不是浮点数。如果是一个字符串转换,它将返回0;

~~1.23 // returns 1
~~"1.23" // returns 1
~~"23" // returns 23
~~"Hello world" // returns 0

这是什么原理?通过翻转)每个位,也称为数字的A1补码。你可以使用它,但注意只能用来存储整数。所以通常情况不要用它,除非你能确定这个数是在32位整数之间的值(因为调用的ToInt32的规范)。

按位非:用它确保输入中没有字符,仅用于整数。

Number

Number与以上提及的转换方式一样存在这样的问题,解析时试图找出你给他的数字:

Number("023") // returns 23
Number(023) // returns 19

注意:023实际上是一个八进制数,无论你怎么做,都是返回19;对于没有单引号或双引号的十六进制数一样。

Number也是JsPerf中最慢的之一。

Number:几乎不用它。

一元云算符

"1.23" * 1 // returns 1.23
"0xFF" - 0 // returns 255
"0xFF.jpg" / 1 // returns NaN
+"023" // returns 23

一元运算符与其它的解析方式不同,如果是一个NaN值,那么返回的也是NaN 。这是我最喜欢的数值转换方式,因为我认为任何带有字符的对象都不应该被视为0或者根据他有多少位来“猜”。我基本使用 + 操作符,因为这个方式不容易混淆。虽然 -0 的用法也很好,但它并没有很好的表达转换为数字的本意。

字符串转换为数字的方式总结

负十六进制数字符串转换为数字时。应首先将任何其转换为String(例如通过 + "" ),然后使用一元运算符或带基数的parseInt解析为数字。但是结果不是NaN的数值时,使用parseFloat更为合适。

总结

以上所述是小编给大家介绍的JavaScript字符串转数字的5种方法及遇到的坑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Js为表单动态添加节点内容的方法
Feb 10 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
xmlplus组件设计系列之列表(4)
Apr 26 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
JS ES6异步解决方案
Apr 29 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 #Javascript
JS在if中的强制类型转换方式
Jul 15 #Javascript
微信小程序form表单组件示例代码
Jul 15 #Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 #Javascript
Bootstrap Table中的多选框删除功能
Jul 15 #Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 #Javascript
简述JS控制台的使用
Jul 15 #Javascript
You might like
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
Javascript的闭包详解
2014/12/26 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
vue的for循环使用方法
2019/02/12 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
小程序input数据双向绑定实现方法
2019/10/17 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
python xml解析实例详解
2016/11/14 Python
Python函数参数操作详解
2018/08/03 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
用python写爬虫简单吗
2020/07/28 Python
爱游人:Travelliker
2017/09/05 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
神路信息Java面试题目
2013/03/31 面试题
财务会计专业应届毕业生求职信
2013/10/18 职场文书
大专生的学习自我评价
2013/12/04 职场文书
便利店投资的创业计划书
2014/01/12 职场文书
分家协议书
2014/04/21 职场文书
干部作风建设工作总结
2014/10/29 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
医生辞职信范文
2015/03/02 职场文书