详解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 入门实例1
Jun 25 Javascript
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
javascript学习笔记(四) Number 数字类型
Jun 19 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
javaScript语法总结
Nov 25 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 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
php5.3 注意事项说明
2013/07/01 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
浅析Ajax语法
2016/12/05 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
python交易记录链的实现过程详解
2019/07/03 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
详解rem 适配布局
2018/10/31 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
全球性的女装店:storets
2019/06/12 全球购物
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
实习期自我鉴定
2013/10/11 职场文书
汽车专业求职信
2014/06/05 职场文书
婚庆公司计划书
2014/09/15 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
红白喜事主持词
2015/07/06 职场文书
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript