浙江铃声推荐联盟

JavaScript:为什么3 + true = 4?(另外还有7个精妙的等式)

京程一灯2019-02-24 11:06:31

3 + true === 4,想知道为什么吗?那就跟我一起来探索这8个有趣的JavaScript等式吧。

math - 来自unsplash.me

前言

嗨,我是Brandon,我创建了codeburst.io并且我还写了JavaScript教程和文章来帮助新手更好的理解Web开发内部工作原理。如果你有任何关于这些文章的问题,留下你的评论,我会给你回复的,或者可以在twitter上 @brandonmorelli找我。最后,当你真的准备深入到Web开发的时候,可以在最好的学习全栈Web开发的课程这里找到你需要的课程。

怎么关注

这开始变得奇怪了——你竟然想跟我学。你可以打开你的Chrome开发者控制台,windows用户按住 Ctrl + Shift + J,Mac用户按Cmd + Option + J打开控制台。这会允许你再你的浏览器里输入下面所有的代码,所以你可以实时的看到发生什么了。


3 + true == 4

我也没有开玩笑,在JavaScript中,当加号操作符放在number 和 boolean这两个类型的值之间的时候,boolean类型的值将会转化成number类型的值。

如果你还记得我之前的JavaScript Showdown这篇文章,false == 0 和 true == 1,记得这个的话,3 + true 就转化成 3 + 1,然后我们就会得到4这个答案了。


true + false

这个跟上面的例子是一个逻辑。当加号操作符放在两个booleans值之间的时候,这两个booleans值都会转化成numbers类型的值,因此true + false 就转化成 1 + 0,然后我们就得到1这个答案了。


‘4’ + 8

那当我们把一个string类型的数字加上一个真的number类型的数字会发生什么呢?当加号操作符被放在两个操作数之间的时候,一个数是string类型的一个字符串,那么它会把其它 number或者 boolean转化成字符串然后用字符串连接它们。

从这个逻辑看:'4' + 8 变成 '4' + '8' 然后我们就得到 '48'这个答案了


true + ‘4’

和上面的例子相似,JavaScript将会把boolean类型的值转化成string类型的值然后进行字符串连接。这会变成'true' + '4',结果就变成'true4'


1 + 1 + ‘1’

操作符的顺序很重要,在这个例子中,JavaScript认为第一个+优先级比其它的优先级高:1 + 1 就等于 2了。然后我们继续,再加上一个string类型的值'1'。多个数相加级联的结果是'21'

这里有事件链:

1 + 1 + '1'
  2   + '1'
       '21'

‘1’ + 1 + 1

当我们把字符串类型的值放在最前面会有什么改变呢?记住操作符的顺序并且从左到右相加。

'1' + 1 + 1
   '11' + 1
       '111'

string + number = string,因此在这里例子中我们得到了一个长字符串'111'


-‘69’ + 69

如果我们尝试在string前面加上一个负号然后再加上一个number类型的值呢?你现在应该知道,如果没有这个负号,我们的答案将会是'6969',然而,这个负号改变了这个结果。

'69'之前的减号是一个一元操作符,事实上它会把string 转化成 number类型并且把它变成负数。因此我们的等式就变成-69 + 69,它等于0


-‘giddyup’ + 409

那如果我们的一元操作符是在一个字符串前面,并且这个字符串不能转化成一个数会怎么样呢?当JavaScript在生成数字失败的时候,我们会得到NaN (Not A Number不是一个数字)这个值。


你做到了!


往期精选文章
ES6中一些超级好用的内置方法
浅谈web自适应
使用Three.js制作酷炫无比的无穷隧道特效

一个治愈JavaScript疲劳的学习计划

全栈工程师技能大全

WEB前端性能优化常见方法

一小时内搭建一个全栈Web应用框架

干货:CSS 专业技巧

四步实现React页面过渡动画效果

让你分分钟理解 JavaScript 闭包


小手一抖,资料全有。长按二维码关注京程一灯,阅读更多技术文章和业界动态。