详解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 相关文章推荐
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
设置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设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
python 日期操作类代码
2018/05/05 Python
python图像处理入门(一)
2019/04/04 Python
深入了解python中元类的相关知识
2019/08/29 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
Python生成器常见问题及解决方案
2020/03/21 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
计算机求职信
2013/12/01 职场文书
加入学生会演讲稿
2014/04/24 职场文书
电力培训心得体会
2014/09/02 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
监察建议书
2015/02/04 职场文书
2015暑假社会调查报告
2015/07/13 职场文书