js基础阵营:变量篇之类型转换

前面我们已经讲解了变量的类型,在上一章,我们了解了基础的类型以及类型的含义以及用法。在这一章中,我们将了解变量的转换的一些知识。
首先我们要了解什么是类型转换,顾名思义就是将数据类型进行转换,例如原有的类型是一个number类型将其转换成string类型,这就是所谓的类型转换。
在JS中我们常见的类型转换有两种,显式类型转换隐式类型转换下面我们一一来说明

一:显式类型转换

顾名思义,是一种显而易见的类型转换,也就是说我们或者编译器通过代码就能清楚的知道是要进行类型转换。下面我们看下常见的几种显式类型转换

字符串与数字间的类型转换

在js中字符串通过String()或者toString(),数字通过Number()来进行显示的类型转换,看下面的代码

var total = 12;
var totalStr= '12';
console.log(typeof String(total))  // string
console.log(typeof total.toString())  // string
console.log(typeof Number(totalStr))  // number

对于强制转换成字符串从我的角度觉得没有什么好说明的,但是对于Number就需要跟我们解析数字字符串方法进行对比了。我们来看下以下代码

var total = '12';
var totalName = '12个';
console.log(Number(total));   // 12
console.log(parseInt(total));  // 12
console.log(Number(totalName)); // nan
console.log(parseInt(totalName)); // 12

为什么会出现这种不一致的情况呢?其实很简单,因为解析方法(parseInt,parseFloat)在解析的时候允许字符串中出现非数字,其解析会解析到非数字的字符,然后将数字返回,而Number强制类型转换,是需要将字符串显示的的转成数字,如果出现非数字的情况自然而然的会需要提示此字符串不是一个数字,所以无法转换。那么parseInt是如何解析的呢?

我们首先看下其方法
image.png

我们可以看到此方法接受两个参数,参数1为一字符串,参数二为一基数。默认基数为10.因此执行的过程为

1:将参数转换成字符串
2:然后从开头进行解析,解析到第一个非数字的字符为止。
因此,我们可以来看看以下的代码

console.log(parseInt(0.01))  // 0
console.log(parseInt(0.0000008));  // 8
console.log(parseInt({
  num:12
}));   // NAN
console.log(parseInt({
  num:12,
  toString:function(){return 24}
})); // 24
parseInt(parseInt,16);  // 15

为什么和我们想象的不一样呢,具体原因就是我前面提到的,参数会先转换成字符串,然后进行解析。所以我们可以一一来看上面的问题
1: 0.01,转换成字符串是'0.01',解析到.的时候结束,所以为0
2:0.0000008,转成成字符串,由于位数很大,故为'8e-7',解析到e为止,故为8
3:{num:12} ,是一 对象,再执行其toString方法后会变成'[object Object]',故NAN
4: { num:12,toString:function(){return 24}},因为重新的toString方法,在执行转换成字符串的时候,执行toString方法,故24
5:parseInt方法在执行toString()方法后是一个function,执行16进制,为15

显示转换为布尔类型

在JS中提供一Boolean方法,其方法可以将传入的参数转换为true和false,那么具体哪些值会转换成true哪些会转换成false呢?看下表

数据类型 true false
字符串 非空字符串 ''
数字 非0数字 0
布尔类型 true false
对象 所有数组,对象,方法
null null
undefined undefined
二:隐式类型转换

顾名思义,与显示的类型转换相反,不是显示的去告诉人们以及编译器需要转换的格式,而有编译器根据一些规则,自动的去转换。下面我们来看看常见的隐式转换

数字和字符串间的隐式转换

我们首先来看下以下代码

var a = '12';
var b = '0';
var c = 12;
var d = 0;
var e = [1,2];
var f = 3;
console.log(a + b);  // '120'
console.log(c+ d);   // 12
console.log(e + f);   // 1,23

为什么会这样呢?首先我们来看+的作用,在js中其既能当做一个数字的加也可作为字符串拼接。所以有了以下规则
1:如果数据类型皆为数字,则执行加法
2:如果数据类型不同,在执行字符串拼接。字符串拼接又有如下规则:
1:将数据转换成字符串,对象以及数组调用其toString方法。
2:将字符串进行拼接。

按照以上规则,所以以上代码的执行结果也就能理解了

隐式转换为布尔类型数据

相比字符串以及数字,转换成布尔类型的情况就很明显,一般会在以下几种情况下会出现
1:if语句中
2:for循环的第二个判断中
3:while循环中
4:逻辑与(&&)或非(||)中
5:三元运算符中
对此就不一一说明了,因为都是常见的方法。

判断相等(==)

其实在日常开发中,我们如果需要判断相同的情况不推荐使用==而是推荐===,具体原因就是==会将数据进行隐式的类型转换,从而导致判断不准确。我们先来看看以下代码

console.log(12=='12');  // true
console.log(true == 12);  // false
console.log(true == '12');  // false
console.log(null == 12);   // false
console.log(null == false); // false
console.log(null == undefined);  // true
console.log(undefined == false);  // false
console.log(null == 0);   // false
console.log(undefined == 0);// false
console.log({a:12} == true);// false
console.log({a:12,toString:function(){return 0}} ==false);//true

为什么会有很多跟我们设想的不一样呢?我们先来看看js的规则。
1:如果双方类型相同,则执行该类型下的对比方法
2:如果为字符串和数子对比,则将字符串强制转换成数子(Number)然后执行数子间的比对
3:如果存在布尔类型,将布尔类型转换成数子,然后进行数子间的比对
4:如果存在对象,则执行对象toString()方法后再按照以上规则执行

按照以上逻辑我想上面的结果也就很明确了.
ps:上面提到过将数组以及对象转换成基本类型后再进行数据对比,那么具体的规则是什么呢?
1:查看需要转换的值是否有valueof方法,
2:如果存在valueOf方法,如果有且返回的是基本类型,则用此返回
3:如果不存在valueOf方法,或者valueOf方法返回的不是基本类型,那么则调用toString方法
以上为本次的类型转换,下面我们将讲解特殊的变量数组,以及其常见的方法

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,951评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,606评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,601评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,478评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,565评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,587评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,590评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,337评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,785评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,096评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,273评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,935评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,578评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,199评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,440评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,163评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,133评论 2 352

推荐阅读更多精彩内容