JavaScript：为什么3 true=4?

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); // 4console.log(3 + true == 4); // trueconsole.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); // 1console.log(true + true); // 2console.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'); // true4console.log('4' + true); // 4trueconsole.log(false + '4'); // false4console.log('4' + false); // 4false

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

console.log(true - '4'); // -3console.log('4' - true); // 3console.log(false - '4'); // -4console.log('4' - false); // 4console.log('4' * false); // 0console.log('4' * true); // 4console.log(true / '4'); // 0.25console.log(false / '4'); // 0console.log('4' / true); // 4console.log('4' / false); // Infinityconsole.log(true % '4'); // 1console.log(false % '4'); // 0console.log('4' % true); // 0console.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：核心技术与案例实战 》。