专栏首页web前端技术分享JS中数据类型转换

JS中数据类型转换

JS中数据类型转换汇总

JS中的数据类型分为 【基本数据类型】 数字 number 字符串 string 布尔 boolean 空 null 未定义 undefined 【引用数据类型】 对象 object - 普通对象 - 数组对象 (Array) - 正则对象 (RegExp) - 日期对象 (Date) - 数学函数 (Math) ... 函数 function

真实项目中,根据需求,我们往往需要把数据类型之间进行转换

把其它数据类型转换为number类型

1.发生的情况

  • isNaN检测的时候:当检测的值不是数字类型,浏览器会自己调用Number方法把它先转换为数字,然后再检测是否为非有效数字
isNaN('3') =>false
  Number('3')->3
  isNaN(3)->false

isNaN('3px') =>true
  Number('3px')->NaN
  isNaN(NaN)->true
  • 基于parseInt/parseFloat/Number去手动转换为数字类型
  • 数学运算:+ - * / %,但是“+”不仅仅是数学运算,还可能是字符串拼接
'3'-1 =>2
  Number('3')->3
  3-1->2

'3px'-1 =>NaN

'3px'+1 =>'3px1' 字符串拼接

var i='3';
i=i+1; =>'31'
i+=1; =>'31'
i++; =>4  i++就是单纯的数学运算,已经摒弃掉字符串拼接的规则
  • 在基于“==”比较的时候,有时候也会把其它值转换为数字类型
  • ...

2.转换规律

//=>转换的方法:Number(浏览器自行转换都是基于这个方法完成的)

【把字符串转换为数字】
只要遇到一个非有效数字字符,结果就是NaN
'' ->0
' ' ->0 空格(Space)
'\n' ->0 换行符(Enter)
'\t' ->0 制表符(Tab)


【把布尔转换为数字】
true ->1
false ->0

【把没有转换为数字】
null ->0
undefined ->NaN

【把引用类型值转换为数字】
首先都先转换为字符串(toString),然后再转换为数字(Number)

把其它类型值转换为字符串

1.发生的情况

  • 基于alert/confirm/prompt/document.write等方法输出内容的时候,会把输出的值转换为字符串,然后再输出
alert(1) =>'1'
  • 基于“+”进行字符串拼接的时候
  • 把引用类型值转换为数字的时候,首先会转换为字符串,然后再转换为数字
  • 给对象设置属性名,如果不是字符串,首先转换为字符串,然后再当做属性存储到对象中(对象的属性只能是数字或者字符串)
  • 手动调用toString/toFixed/join/String等方法的时候,也是为了转换为字符串
var n=Math.PI;//=>获取圆周率:
n.toFixed(2) =>'3.14'

var ary=[12,23,34];
ary.join('+') =>'12+23+34'
  • ...

2.转换规律

//=>调用的方法:toString

【除了对象,都是你理解的转换结果】
1 ->'1'
NaN ->'NaN'
null ->'null'
[] ->''
[13] ->'13'
[12,23] ->'12,23'
...

【对象】
{name:'xxx'} ->'[object Object]'
{} ->'[object Object]'
不管是啥样的普通对象,最后结果都一样

把其它值转换为布尔类型

1.发生的情况

  • 基于!/!!/Boolean等方法转换
  • 条件判断中的条件最后都会转换为布尔类型
  • ...
if(n){
  //=>把n的值转换为布尔验证条件真假
}

if('3px'+3){
  //=>先计算表达式的结果'3px3',把结果转换为布尔true,条件成立
}

2.转换的规律 只有“0/NaN/''/null/undefined”五个值转换为布尔的false,其余都是转换为true

特殊情况:数学运算和字符串拼接 “+”

//=>当表达式中出现字符串,就是字符串拼接,否则就是数学运算

1+true =>2 数学运算
'1'+true =>'1true' 字符串拼接

[12]+10 =>'1210' 虽然现在没看见字符串,但是引用类型转换为数字,首先会转换为字符串,所以变为了字符串拼接
({})+10 =>"[object Object]10"
[]+10 =>"10"

{}+10 =>10 这个和以上说的没有半毛钱关系,因为它根本就不是数学运算,也不是字符串拼接,它是两部分代码
  {} 代表一个代码块(块级作用域)
  +10 才是我们的操作
  严格写法:{}; +10;

思考题:

12+true+false+null+undefined+[]+'佳佳'+null+undefined+[]+true
=>'NaN佳佳nullundefinedtrue'

12+true ->13
13+false ->13
13+null ->13
13+undefined ->NaN
NaN+[] ->'NaN'
'NaN'+'佳佳' ->'NaN佳佳'
...
'NaN佳佳rueundefined'
'NaN佳佳trueundefined'+[] ->'NaN佳佳trueundefined'
...
=>'NaN佳佳trueundefinedtrue'

特殊情况:“==”在进行比较的时候,如果左右两边的数据类型不一样,则先转换为相同的类型,再进行比较

对象==对象:不一定相等,因为对象操作的是引用地址,地址不相同则不相等

{name:'xxx'}=={name:'xxx'} =>false
[]==[] =>false

var obj1={};
var obj2=obj1;
obj1==obj2 =>true

==========================>上面是重点强调的

对象==数字:把对象转换为数字 对象==布尔:把对象转换为数字,把布尔也转换为数字 对象==字符串:把对象转换为数字,把字符串也转换为数字 字符串==数字:字符串转换为数字 字符串==布尔:都转换为数字 布尔==数字:把布尔转换为数字 ===========================>不同情况的比较,都是把其它值转换为数字,然后再进行比较的

null==undefined:true null===undefined:false null&&undefined和其它值都不相等

NaN==NaN:false NaN和谁都不相等包括自己 ===========================>以上需要特殊记忆

1==true =>true
1==false =>false
2==true =>false  规律不要混淆,这里是把true变为数字1   //未掌握


[]==true:false  都转换为数字 0==1
![]==true:false

[]==false:true  都转换为数字 0==0
![]==false:true  先算![],把数组转换为布尔取反=>false  =>false==false

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS-字符串截取方法slice、substring、substr的区别

    slice() 方法可通过指定的开始和结束位置,提取字符串的某个部分,并以新的字符串返回被提取的部分。语法如下:

    TimothyJia
  • JS中的NaN和isNaN,简直是双重人格?

    isNaN的用法:检测当前值是否不是有效数字,返回true代表不是有效数字,返回false是有效数字

    TimothyJia
  • css3自适应布局单位vw,vh详解

    在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视...

    TimothyJia
  • 数据类型和变量

    计算机是能做数学运算的机器,因此,计算机程序可以处理各种数值,但是计算机不仅能处理数值,还能处理文本、图形、音频、视频、网页等各种各样的数据,所以不同的数据,就...

    wfaceboss
  • 可信执行环境相关认证规范汇总

    前面提到过TEE的有那些认证,请参考:可信执行环境相关认证证书一览。 我们今天来总结一下,这些认证需要参考的相关标准、规范!如下图所示: ? GP功能性和安全性...

    安智客
  • 字符串加法

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    喜欢ctrl的cxk
  • 云服务器快速构建WordPress博客

    最近搞了一个博客,采用WordPress搭建的,其实本来就依托cnblog和公众号更新博文,想想自己搞一个会更好一些,独立一些,而且可以配置独立域名和主体,随之...

    风间影月
  • knockout源码分析之执行过程

    一、执行流程 ? 二、主要类分析 2.1. 在applyBindings中,创建bindingContext,然后执行applyBindingsToNodeAn...

    sam dragon
  • Kubernetes集群监控Promethues+Grafana

    其中基础设施层监控指标的拉取肯定是来在Prometheus的node_exporter,因为我们要监控的服务器节点既包含Kubernetes节点又包含其他部署独...

    菲宇
  • 云MongoDB优化使LBS服务性能提升十倍

    随着国内服务共享化的热潮普及,共享单车,共享雨伞,共享充电宝等各种服务如雨后春笋,随之而来的LBS服务定位问题成为了后端服务的一个挑战。MongoDB对LBS...

    腾讯云数据库 TencentDB

扫码关注云+社区

领取腾讯云代金券