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浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
JS常用正则表达式总结
Nov 12 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
解决vue中的无限循环问题
Jul 27 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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
jQuery 动画基础教程
2008/12/25 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
2016/06/07 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
Python定时执行之Timer用法示例
2015/05/27 Python
python实现图片变亮或者变暗的方法
2015/06/01 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
Python如何用filter函数筛选数据
2020/03/05 Python
python获取整个网页源码的方法
2020/08/03 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
幼师大班个人总结
2015/02/13 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
Django框架中模型的用法
2022/06/10 Python