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 相关文章推荐
33种Javascript 表格排序控件收集
Dec 03 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
javascript中caller和callee详解
Aug 10 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
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数据缓存技术
2007/02/14 PHP
PHP的autoload自动加载机制使用说明
2010/12/28 PHP
php开启安全模式后禁用的函数集合
2011/06/26 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
window.location不跳转的问题解决方法
2014/04/17 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
js实现文字头像的生成代码
2020/03/07 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
处理Python中的URLError异常的方法
2015/04/30 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
Python元组常见操作示例
2019/02/19 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
快速了解Python开发环境Spyder
2020/06/29 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
团员学习总结的自我评价范文
2013/10/14 职场文书
精细化工应届生求职信
2013/11/17 职场文书
大学生个人自我鉴定
2013/12/03 职场文书
军训生自我鉴定范文
2013/12/27 职场文书
工作决心书
2014/03/11 职场文书
保护环境标语
2014/06/09 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
Python中re模块的元字符使用小结
2022/04/07 Python
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电