3 + true === 4。学习为什么以及一起探索其他八个有趣的JavaScript方程式。

如何跟随

跟随我往下一起探索是不是觉得奇怪？你可以打开你的Chrome浏览器的开发者控制台：Windows系统按下Ctrl + Shift + J，Mac电脑按下Cmd + Option + J。这样做的好处是，让你在控制台输入以下代码，你会可以看到这些代码会发生什么。

3 + true == 4

我不是在开玩笑。在JavaScript中，当+操作符之间放置一个number和boolean，这个boolean会转为一个number。

不知道你是否阅读过我前面分享过的文章。文章中介绍过false == 0和true == 1。有此可鉴，3 + true转化为3 + 1，因此得到的答案是4。

console.log(3 + true); // 4
console.log(3 + true == 4); // true
console.log(3 + true = 4); // Uncaught ReferenceError: Invalid left-hand side in assignment

true + false

这里的逻辑和上面的示例一样。当+运算符之间两都都是boolean，那么两个boolean都会转成number。这样一来，true + false就转换成1 + 0，两者的结果就是1。

console.log(true + false); // 1
console.log(true + true); // 2
console.log(false + false); // 0

'4' + 8

当一个string数字和一个真实的number通过+运算符运算将会发生什么呢？当一个+运算符放置在一个string和number或boolean之间时，number和boolean将变成一个string。两者将连接在一起。

这个逻辑是这样的，'4' + 8变成了'4' + '8'，得到的答案就是'48'。

true + '4'

类似上面的例子，JavaScript先将boolean转换成字符串，再和字符串连接。这就变成了true + '4'的结果是true4。

console.log(true + '4'); // true4
console.log('4' + true); // 4true
console.log(false + '4'); // false4
console.log('4' + false); // 4false

注意：如果boolean和number之间不是+运算符，是其他的运算符时（比如-、*、/或者%），boolean和string都会转换成number。比如下面的示例：

console.log(true - '4'); // -3
console.log('4' - true); // 3
console.log(false - '4'); // -4
console.log('4' - false); // 4
console.log('4' * false); // 0
console.log('4' * true); // 4
console.log(true / '4'); // 0.25
console.log(false / '4'); // 0
console.log('4' / true); // 4
console.log('4' / false); // Infinity
console.log(true % '4'); // 1
console.log(false % '4'); // 0
console.log('4' % true); // 0
console.log('4' % false); // NaN

1 + 1 + '1'

运算符的顺序也是非常重要的。在这个例子中，JavaScript先会评估第一个运算符+，这个+前后都是number，所以先会进行加法运算，也就是1 + 1 = 2。然后继续看第二个运算符+，这个运算符是置于一个number和一个string之间。根据前面介绍的，这个时候number会变成string，所以两个string会拼接在一起，也就是最后的答案是'21'。

操作的过程：

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

'1' + 1 + 1

当我们把第一个number和最后一个string调换一个位置将会发生什么呢？要记住，操作符的运算顺序是从左到右。

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

string + number = string。所以这个例子最后的结果得到的是一串字符串'111'。

-'69' + 69

如果在一个string前面添加一个负号-和一个number相加，这个时候会发生什么呢？现在你应该知道，如果string前面没有这个-号，我们的答案是'6969'。然而，有-号会有什么变化。

'69'前面有一个-号，其实是一个一元操作符，它将一个string转换成一个负的number。因此我们的方程式变成了-69 + 69 = 0。最终的答案也就是0。

-'giddyup' + 409

如果在一个string前有一个一元操作符（-），string总不能转换成一个number吧。当JavaScript未能生成一个number，将会生成一个NaN（不是一个number）。这个时候运算符就变成了NaN + 409，其结果就是NaN。

你做到了

干得好！我希望你喜欢我的这篇文章。如果你关于JavaScript方面更多的经验或建议，欢迎在下面的评论中与我们一起分享。

本文根据@Brandon Morelli的《JavaScript: Why does 3 + true = 4? (and 7 other tricky equations)》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处:https://codeburst.io/javascript-why-does-3-true-4-and-7-other-tricky-equations-9dd13cb2a92a

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：https://www.w3cplus.com/javascript/javascript-why-does-3-true-4-and-7-other-tricky-equations.htmlnike air max 90 custom