javascript类型转换讲解(JavaScript数据类型转换详解推荐)
javascript类型转换讲解
JavaScript数据类型转换详解推荐JS数据类型
在 JavaScript 语言中数据类型分为2大类:基本数据类型和复杂数据类型
基本数据类型有:
- number
- string
- boolean
- null
- undefined
- symbol
- bigint
复杂数据类型有:
- 标准普通对象:object
- 标准特殊对象:Array、RegExp、Date、Math、Error……
- 非标准特殊对象:Number、String、Boolean……
- 可调用/执行对象「函数」:function
类型之间的转换
类型转换可以分为两种:隐式类型转换 和 显式类型转换。
显式类型强制转换 是指当开发人员通过编写适当的代码用于在类型之间进行转换,比如:Number(value)。
隐式类型转换 是指在对不同类型的值使用运算符时,值可以在类型之间自动的转换,比如0 == null
在 JS 中只有 3 种类型的转换:
- 转化为 Number 类型:Number() / parseFloat() / parseInt()
- 转化为 String 类型:String() / toString()
- 转化为 Boolean 类型: Boolean()
类型转换的逻辑无论在原始类型和对象类型上,他们都只会转换成上面 3 种类型之一。所以只需要弄清在什么场景下应该转成哪种类型就可以了
转换为boolean
显式:Boolean()方法可以用来显式将值转换成布尔型。
隐式:隐式类型转换通常在逻辑判断或者有逻辑运算符时被触发(|| && !)。
boolean 类型转换只会有 true 或者 false 两种结果。除了“0/NaN/空字符串/null/undefined”五个值是false,其余都是true
转换为string
显式:String()方法可以用来显式将值转为字符串。
String([1,2,3]) //"1,2,3" String({}) //"[object Object]"
隐式转换通常在有 + 运算符并且有一个操作数是 string 类型时被触发。
“+”代表的字符串拼接,如果下面的情况存在时会触发转换
- 有两边,一边是字符串,则会变成字符串拼接;
- 有两边,一边是对象
1 + {} //"1[object Object]" NaN + {} //"NaN[object Object]"
转换为number
显式:Number()方法可以用来显式将值转换成数字类型。
字符串转换为数字:空字符串变为0,如果出现任何一个非有效数字字符,结果都是NaN
Number("") //0 Number("10px") //NaN Number("10") //10
布尔转换为数字
Number(true) //1 Number(false) //0
null和undefined转换成数字
Number(null) //0 Number(undefined) //NaN
Symbol无法转换为数字,会报错:Uncaught TypeError: Cannot convert a Symbol value to a number
BigInt去除“n”
Number(12312412321312312n) //12312412321312312
对象转换为数字,会按照下面的步骤去执行
先调用对象的 Symbol.toPrimitive 这个方法,如果不存在这个方法
再调用对象的 valueOf 获取原始值,如果获取的值不是原始值
再调用对象的 toString 把其变为字符串
最后再把字符串基于Number()方法转换为数字
let obj ={ name:'xxx' } console.log(obj-10) // 数学运算:先把obj隐式转换为数字,再进行运算 //运行机制 obj[Symbol.toPrimitive] //undifined obj.valueof() // {name:xxx} obj.toString() // [object object] Number ("[object object]") // NaN NaN-10 // NaN obj+10 //"[object object]10"
隐式:number 的隐式类型转换是比较复杂的,因为它可以在下面多种情况下被触发。
- 比较操作(>, <, <=, >=)
- 按位操作(| & ^ ~)
- 算数操作(- + * / %), 注意:当 + 操作存在任意的操作数是 string 类型时,不会触发 number 类型的隐式转换
- 一元 + 操作
操作符==两边的隐式转换规则
如果两边数据类型不同,需要先转为相同类型,然后再进行比较,以下几种情况需要注意一下:
可以根据这个图进行参考,如对象和布尔比较的话,
- 对象 => 字符串 => 数值
- 布尔值 => 数值。
对象==字符串
[1,2,3]=='1,2,3' //true [1,2,3][Symbol.toPrimitive] //undefined [1,2,3].valueOf() //[1, 2, 3] [1,2,3].toString() //"1,2,3"
null/undefined
null==undefined //true null===undefined //false 不会发生隐试类型转换
注意:null/undefined和其他任何值都不相等
对象==对象
比较的是堆内存地址,地址相同则相等
{}=={} //false 因为比较的是地址
NaN
除了以上情况,只要两边类型不一致,剩下的都是转换为数字,然后再进行比较
需要注意的情况
{} + [] === 0 // true [] + {} === 0 // false [] + {} = "[object Object]" {} + [] = 0 /** * 对于编译器而言,代码块不会返回任何的值 * 接着+[]就变成了一个强制转number的过程 * []通过ToPrimitive变成'',最后''通过ToNumber操作转换成0 **/
结尾练习
let result = 100 + true + 21.2 + null + undefined + “Tencent” + [] + null + 9 + false;
result的结果是?
1.首先100 + true
+连接符两边存在Number类型,true转number为1,进行加法运算,结果为:101
2.101 + 21.2
+连接符两边均为Number类型,进行加法运算,结果为:122.2
3.122.2 + null
+连接符两边存在Number类型,null转number为0,进行加法运算,结果为:122.2
4.122.2 + undefined
+连接符两边存在Number类型,undefined转number为NaN,NaN与任何数据类型计算都为NaN,结果为:NaN
5.NaN + "Tencent"
+连接符两边存在String类型,NaN转string为"NaN",进行字符串拼接,结果为:"NaNTencent"
6."NaNTencent" + []
+连接符两边存在String类型,[]转string为"",进行字符串拼接,结果为:"NaNTencent"
7."NaNTencent" + null
+连接符两边存在String类型,null转string为"null",进行字符串拼接,结果为:"NaNTencentnull"
8."NaNTencentnull" + 9
+连接符存在String类型,9转string为"9",进行字符串拼接,结果为:"NaNTencentnull9"
9."NaNTencentnull9" + false
+连接符存在String类型,false转string为"false",进行字符串拼接,结果为:"NaNTencentnull9false"
总结
到此这篇关于JavaScript数据类型转换的文章就介绍到这了,更多相关js数据类型转换内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
- 微信浏览器中JS实现返回操作
- php入门教程源代码修改教程(php+js实现的无刷新下载文件功能示例)
- 原生js实现轮播图代码(js实现轮播图制作方法)
- eval解析json字符串
- nodejs的广播机制(node.js如何自定义实现一个EventEmitter)
- php加密平台(PHP7实现和CryptoJS的AES加密方式互通示例AES-128-ECB加密)
- js函数声明和函数表达式的区别
- js tab栏案例(JavaScript实现Tab栏切换特效)
- js三级联动列表(基于JavaScript实现年月日三级联动)
- php验证码图解(php/JS实现的生成随机密码验证码功能示例)
- webmaven项目如何启动(js基础语法与maven项目配置教程案例)
- sqlserver常见函数(SQL Server之JSON 函数详解)
- react组件分析(react-diagram 序列化Json解读案例分析)
- jquery遍历json字符串
- js脚本语言原理(实例说明js脚本语言和php脚本语言的区别)
- ExtJs中XTemplate使用
- 下雪会怎样(下雪怎样画)
- 白蓝色穿搭(白蓝色衣服配什么裤子)
- 天空是什么颜色(天空是什么颜色的英语)
- 高马尾扎发(高马尾扎发教程视频)
- 这里输入关键词(请手动输入关键词)
- 小说 顾瑾岚拿出一套飞行棋,别说你连飞行棋都不会哦(顾瑾岚拿出一套飞行棋)
热门推荐
- docker容器网络设置(对docker中的overlay式网络详解)
- jquery 淡入淡出
- python怎么设置matlab编程(实例详解Matlab 与 Python 的区别)
- nodejs数据采集(nodejs获取表单数据的三种方法实例)
- mysql重复插入数据教程(Mysql避免重复插入数据的4种方式)
- python爬虫10分钟教程(浅谈Python爬虫基本套路)
- JavaScript中使用concat合并数组
- DIV+CSS网页布局时常犯的几个错误
- python获取特定时间日期的数据(Python提取特定时间段内数据的方法实例)
- nginx https 域名配置(阿里云Nginx配置https实现域名访问项目图文教程)