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 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
angularJS提交表单(form)
Feb 09 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
深入Vue-Router路由嵌套理解
Aug 13 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 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实现弹出消息提示框的两种方法
2013/12/17 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
Laravel日志用法详解
2016/10/09 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
Python中统计函数运行耗时的方法
2015/05/05 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
python实现五子棋游戏
2019/06/18 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
英国电气世界:Electrical World
2019/09/08 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
初中生学习生活的自我评价
2013/11/20 职场文书
投资合作协议书范本
2014/04/17 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
医院消毒隔离制度
2015/08/05 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
python数字转对应中文的方法总结
2021/08/02 Python
如何利用golang运用mysql数据库
2022/03/13 Golang