详解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 Event学习第九章 鼠标事件
Feb 08 Javascript
js DataSet数据源处理代码
Mar 29 Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
vue中div禁止点击事件的实现
Apr 02 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通过curl模拟登陆DZ论坛
2015/05/11 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
javascript实现日期格式转换
2014/12/16 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
机器学习python实战之决策树
2017/11/01 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
Python对象与引用的介绍
2019/01/24 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
巴西在线鞋店:Shoestock
2017/10/28 全球购物
英国在线花园中心:You Garden
2018/06/03 全球购物
甜品店创业计划书
2014/09/21 职场文书
Python中time与datetime模块使用方法详解
2022/03/31 Python
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫