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 相关文章推荐
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
Node.js使用Koa搭建 基础项目
Jan 08 Javascript
Vue多系统切换实现方案
Jun 05 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
微信小程序实现点击效果
Jun 21 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 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
Snoopy类使用小例子
2008/04/15 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
javascript Demo模态窗口
2009/12/06 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
Python常用模块用法分析
2014/09/08 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
使用Python实现批量ping操作方法
2020/05/06 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
python实现三壶谜题的示例详解
2020/11/02 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
python3代码中实现加法重载的实例
2020/12/03 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
小学防溺水制度
2014/01/29 职场文书
大学军训感言1500字
2014/03/09 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
2015年女工委工作总结
2015/07/27 职场文书
学校安全管理制度
2015/08/06 职场文书
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server