JavaScript中的值类型转换介绍


Posted in Javascript onDecember 31, 2014

在JavaScript中进行+、-、*、/、==、!=等运算时,如果操作符左右两边的值类型与预期类型不一致,JavaScript会将操作符两边的值转换成预期的类型后再进行操作。预期值类型为string时,JavaScript会将值转换为string;预期值类型为number时,JavaScript会将值转换为number (如果无法转换为数值,则返回NaN)比如:

 

console.log(10 + " cats");//10 cats

console.log(10 * " cats");//NaN, " cats" will be converted to NaN

console.log(10 + "2");//102

console.log(10 - "2");//8

console.log(10 / "2");//5

console.log(10 * "2");//20

console.log(10 * " 2");//20

console.log("10" * "2");//20

值类型转换规则

JavaScript中的值转换规则可以参考“JavaScript ? The Definitive Guide”一书中的Table 3-2. JavaScript type conversions。比较值得注意的一些地方是:

1.undefined转换成number后结果为NaN。
2.null转换成number后结果为0。
3.空字符串”"转换成number后结果为0。
4.-0转换成string后结果为”0″。
5.空数组[]转换成number后结果为0。
6.仅有一个number成员的数组(如[9])转换成number后结果为该numer值(9)。

当JavaScript将string转换成number时,有两个比较有趣的规则:

1.JavaScript会将字符串开头和结尾处的空白字符删除后再进行转换,因此像” 42 “这样的字符串可以顺利的被转换成数字42。

2.删除开头和结尾处的空白字符后,如果字符串中依然包含非数字字符,那么该字符串会被转换成NaN。比如:”3 m”就会被转换成NaN。

实例:

console.log(10 * " 3 ");//30

console.log(10 * "3 m");//NaN, "3 m" will be converted to NaN

值类型转换与比较

在JavaScript中,等于操作符(==)的使用会涉及到值类型转换:如果==操作符两边的值类型不一致,那么JS会将它们转换成一致的类型后再加以判断。需要小心的是,两个不同类型的值,经过类型转换后也许可以等价,但这并不意味着对它们使用==操作符的结果就一定为true。一个简单的例子是undefined和false:将undefined转换成boolean类型后结果刚好为false,但事实上undefined==false的结果却为false。

显式类型转换

使用JavaScript的类型自动转换非常便捷,但同时也很容易带来诸如代码可维护性等问题。为了使程序代码更加清晰、减少歧义,有时会在JS程序中使用显式类型转换:

Number("3")//3

String(false)//"false"

Boolean([])//true

大多数情况下,显式类型转换的结果与JS自动类型转换的结果是一致的;但存在1个特例:当将null或者undefined自动转换成Object时,JS将抛出TypeError错误;但当显式地将null或者undefined转换成Object时,JS将返回一个空的对象:
console.log(Object(undefined));//empty object

console.log(Object(null));//empty object

同时,如果显式转换所指定的类型与JS自动转换所指定的类型不一样,那么,得到的结果也不一样。比如之前所提及的undefined==false结果为false;如果显式指定转换类型为Boolean,那么得到的结果就为true了:
console.log(undefined == false);//false

console.log(Boolean(undefined) == Boolean(false));//true

对类型自动转换的使用

在JS中,可以使用值类型的自动转换,通过操作符来达到和显式转换一样的效果,比如:

console.log(false + "");//"false"

console.log(+false);//0

console.log(!!3);//true
Javascript 相关文章推荐
收藏Javascript中常用的55个经典技巧
Aug 12 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
JS画5角星方法介绍
Sep 17 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
js实现异步循环实现代码
Feb 16 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
在vue里面设置全局变量或数据的方法
Mar 09 Javascript
vue组件通信传值操作示例
Jan 08 Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
vue 取出v-for循环中的index值实例
Nov 09 Javascript
javascript实现滑动解锁功能
Dec 31 #Javascript
JavaScript中number转换成string介绍
Dec 31 #Javascript
JavaScript中string转换成number介绍
Dec 31 #Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 #Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 #Javascript
javascript 事件处理示例分享
Dec 31 #Javascript
JavaScript中的变量作用域介绍
Dec 31 #Javascript
You might like
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
jQuery版仿Path菜单效果
2011/12/15 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
python连接池实现示例程序
2013/11/26 Python
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
python获取从命令行输入数字的方法
2015/04/29 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
台湾生鲜宅配:大口市集
2017/10/14 全球购物
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
优秀应届毕业生自荐信
2013/11/16 职场文书
擅自离岗检讨书
2014/02/11 职场文书
禁毒宣传标语
2014/06/19 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
家装业务员岗位职责
2015/04/03 职场文书
起诉书格式范文
2015/05/20 职场文书
夏洛特的网观后感
2015/06/15 职场文书
致运动员赞词
2015/07/22 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
讲解Python实例练习逆序输出字符串
2022/05/06 Python