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 相关文章推荐
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
JS中判断null的方法分析
Nov 21 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 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
.htaccess文件保护实例讲解
2011/02/06 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
JS 树形递归实例代码
2010/05/18 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
python连接字符串的方法小结
2015/07/13 Python
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
python的文件操作方法汇总
2017/11/10 Python
python机器学习之神经网络(一)
2017/12/20 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
python正则表达式面试题解答
2020/04/28 Python
python3中的md5加密实例
2018/05/29 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
企业后勤岗位职责
2014/02/28 职场文书
品德评语大全
2014/05/05 职场文书
教研处工作方案
2014/05/26 职场文书
节约用水的口号
2014/06/20 职场文书
公司活动总结范文
2014/07/01 职场文书
医院合作协议书
2014/08/19 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
七年级生物教学反思
2016/02/20 职场文书
详解JS数组方法
2021/11/20 Javascript