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的数据类型检测
Jul 10 Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
js获取php变量的实现代码
Aug 10 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 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开启安全模式后禁用的函数集合
2011/06/26 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
Vue如何实现验证码输入交互
2020/12/07 Vue.js
python将文本转换成图片输出的方法
2015/04/28 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
考试不及格检讨书
2014/01/09 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
抽奖活动主持词
2014/03/31 职场文书
学习十八大的感悟
2015/08/11 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
pandas中关于apply+lambda的应用
2022/02/28 Python