详解Javascript数据类型的转换规则


Posted in Javascript onDecember 12, 2016

一、数据类型

5种基本数据类型:Null/Undefined/String/Boolean/Number

1种复杂数据类型:Object

二、数据类型检测

传送门《JS中检测数据类型的几种方式及优缺点小结》

1、typeof

2、instanceof/constructor

3、Object.prototype.toString.call(value)

4、Object.prototype.toString

三、数据类型转换

JS内部提供不同数据类型的自动转换机制,在某处预期为某种类型而不是某种类型时,就会自动转换为预期类型,这就是我们常说的隐式转换。

1、强制类型转换

在了解隐式转换的规则前先来看看强制类型转换,强制类型转换主要是用Boolean()/String()/Number()将各类型的数据转换成布尔、字符串、数值型数据。

Boolean() 函数

当要转换的值是至少有一个字符的字符串、非 0 数字或对象时,Boolean() 函数将返回 true。如果该值是空字符串、数字 0、undefined 或 null,它将返回 false。

var b1 = Boolean(""); //false - 空字符串
var b2 = Boolean("hello"); //true - 非空字符串
var b1 = Boolean(50); //true - 非零数字
var b1 = Boolean(null); //false - null
var b1 = Boolean(0); //false - 零
var b1 = Boolean(new object()); //true - 对象

Number() 函数

Number() 函数的强制类型转换与 parseInt() 和 parseFloat() 方法的处理方式相似,只是它转换的是整个值,而不是部分值。

parseInt() 和 parseFloat() 方法只转换第一个无效字符之前的字符串,因此 "1.2.3" 将分别被转换为 "1" 和 "1.2"。

用 Number() 进行强制类型转换,"1.2.3" 将返回 NaN,因为整个字符串值不能转换成数字。如果字符串值能被完整地转换,Number() 将判断是调用 parseInt() 方法还是 parseFloat() 方法。

详解Javascript数据类型的转换规则

String() 函数

最后一种强制类型转换方法 String() 是最简单的,因为它可把任何值转换成字符串。

要执行这种强制类型转换,只需要调用作为参数传递进来的值的 toString() 方法,即把 12 转换成 "12",把 true 转换成 "true",把 false 转换成 "false",以此类推。

强制转换成字符串和调用 toString() 方法的唯一不同之处在于,对 null 和 undefined 值强制类型转换可以生成字符串而不引发错误:

var s1 = String(null); //"null"
var oNull = null;
var s2 = oNull.toString(); //会引发错误

2、自动类型转换

说完了强制类型转换,再来看看自动类型转换,实际上自动类型转换是建立在强制类型转换的基础上,当预期某个位置应该是某类型(布尔、数值、字符串)的数据时,就会调用相应的强制类型转换函数,这个是自动进行的。

*当JavaScript遇到预期为布尔值的地方(比如if语句的条件部分),就会将非布尔值的参数自动转换为布尔值。系统内部会自动调用Boolean函数。

因此除了以下六个值,其他都是自动转为true。

  • undefined
  • null
  • -0
  • 0或+0
  • NaN
  • ''(空字符串)

*当JavaScript遇到预期为字符串的地方,就会将非字符串的数据自动转为字符串。系统内部会自动调用String函数。

字符串的自动转换,主要发生在加法运算时。当一个值为字符串,另一个值为非字符串,则后者转为字符串。

*当JavaScript遇到预期为数值的地方,就会将参数值自动转换为数值。系统内部会自动调用Number函数。

除了加法运算符有可能把运算子转为字符串,其他运算符都会把运算子自动转成数值。

一元运算符也会把运算子转成数值。

+'abc' // NaN
-'abc' // NaN
+true // 1
-false // 0

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
设置jquery UI 控件的大小方法
Dec 12 #Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 #Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 #Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 #Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 #Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 #Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 #Javascript
You might like
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
小结Python用fork来创建子进程注意事项
2014/07/03 Python
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
django 信号调度机制详解
2019/07/19 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
Django model class Meta原理解析
2020/11/14 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
师范毕业生个人求职信
2013/12/09 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
中考学习决心书
2015/02/04 职场文书
优秀大学生自荐信
2015/03/26 职场文书
学校节水倡议书
2015/04/29 职场文书
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技