安装meme

TLDR：强迫自己使用三重等于。 (TLDR: Coerce yourself to use triple equals.)

I unintentionally found this JavaScript meme on Reddit, and it's the best one I've ever seen.

我在Reddit上无意间发现了这个JavaScript meme，这是我见过的最好JavaScript meme。

You can verify this meme's accuracy by running each code snippet in Developer Tools. The result isn't surprising, but still kind of disappointing.

您可以通过运行Developer Tools中的每个代码片段来验证此模因的准确性。 结果并不令人惊讶，但仍然令人失望。

Of course this little experiment lead me to wonder...

当然，这个小实验使我想知道...

为什么会这样？ (Why Does This Happen?)

With experience, I've learned to embrace JavaScript's smooth sides while bewaring its prickly pines. Nonetheless, this corner case's details still nicked me.

凭着经验，我学会了拥抱JavaScript的流畅方面，同时警惕它的尖刺。 尽管如此，这个极端案例的细节仍然让我难忘。

It's just as Kyle Simpson says...

就像凯尔·辛普森(Kyle Simpson)所说的...

"I don’t think anyone ever really knows JS, not completely anyway."

“我认为没有人真正了解JS，反正也不是完全。”

When these cases pop up, it's best to consult the source–the official ECMAScript specification that JavaScript is built from.

当出现这些情况时，最好参考源代码-构建JavaScript的官方ECMAScript规范 。

With the spec in hand, let's deeply understand what's going on here.

掌握了该规范，让我们深入了解这里发生了什么。

小组1-强制性介绍 (Panel 1 - Introducing Coercion)

If you run 0 == "0" in your developer console, why does it return true?

如果在开发人员控制台中运行0 == "0" ，为什么它返回true ？

0 is a number, and "0" is a string, they should never be the same! Most programming languages respect that. 0 == "0" in Java, for example, returns this:

0是数字， "0"是字符串，它们永远不应相同！ 大多数编程语言都尊重这一点。 0 == "0"在Java中，例如，返回以下内容：

error: incomparable types: int and String

This makes perfect sense. If you want to compare an int and String in Java, you must first convert them to the same type.

这是很合理的。 如果要在Java中比较int和String，则必须首先将它们转换为相同类型。

But this is JavaScript, y'all!

但这就是JavaScript，你们好！

When you compare two values via ==, one of the values may undergo coercion.

当您通过==比较两个值时，其中一个值可能会强制转换 。

Coercion–Automatically changing a value from one type to another.

强制– 自动将值从一种类型更改为另一种类型。

Automatically is the key word here. Instead of you explicitly converting your types, JavaScript does it for you behind the scenes.

自动是这里的关键词。 JavaScript不是在后台显式转换类型，而是在后台为您完成转换。

This is convenient if you're purposely exploiting it, but potentially harmful if you're unaware of its implications.

如果您有意利用它，这会很方便，但是如果您不了解它的含义，则可能会造成危害。

Here's the official ECMAScript Language Specification on that. I'll paraphrase the relevant part:

这是官方的ECMAScript语言规范 。 我将解释相关部分：

If x is Number and y is String, return x == ToNumber(y)

如果x是Number而y是String，则返回x == ToNumber(y)

So for our case of 0 == "0":

因此，对于我们的0 == "0" ：

Since 0 is Number and "0" is String, return 0 == ToNumber("0")

由于0是数字，“ 0”是字符串，因此返回0 == ToNumber(“ 0”)

Our string "0" has been secretly converted to 0, and now we have a match!

我们的字符串"0"已秘密转换为0 ，现在我们有了一个匹配项！

0 == "0" // true
// The second 0 became a number!
// so 0 equals 0 is true....

Weird right? Well get used to it, we're not even halfway done.

对吗？ 好好习惯吧，我们甚至还没有完成一半。

面板2-阵列也被强制 (Panel 2 - Arrays Get Coerced Too)

This nonsense isn't limited to primitives like strings, numbers, or booleans. Here's our next comparison:

废话不限于字符串，数字或布尔值之类的原语。 这是我们的下一个比较：

0 == [] // true
// What happened...?

Coercion again! I'll paraphrase the spec's relevant part:

再次胁迫！ 我将解释该规范的相关部分：

If x is String or Number and y is Object, return x == ToPrimitive(y)

如果x是String或Number而y是Object，则返回x == ToPrimitive(y)

Three things here:

这里的三件事：

1.是的，数组是对象 (1. Yes, arrays are objects)

Sorry to break it you.

抱歉打扰您了。

2.空数组变成空字符串 (2. Empty array becomes empty string)

Again according to the spec, JS first looks for an object's toString method to coerce it.

再次根据规范 ，JS首先寻找对象的toString方法来强制它。

In the case of arrays, toString joins all of its elements and returns them as a string.

对于数组， toString连接其所有元素，并将它们作为字符串返回。

[1, 2, 3].toString() // "1,2,3"
['hello', 'world'].toString() // "hello,world"

Since our array's empty, we have nothing to join! Therefore...

由于数组为空，因此没有任何要加入的内容！ 因此...

[].toString() // ""

The spec's ToPrimitive turns this empty array into an empty string. References are here and here for your convenience (or confusion).

规范的ToPrimitive将这个空数组变成一个空字符串。 此处和此处的参考内容是为了您的方便(或混淆)。

3.空字符串然后变为0 (3. Empty string then becomes 0)

You can't make this stuff up. Now that we've coerced the array to "", we're back to the first algorithm...

你不能把这些东西编起来。 现在我们将数组强制为"" ，我们回到第一个算法...

If x is Number and y is String, return x == ToNumber(y)

如果x是Number而y是String，则返回x == ToNumber(y)

So for 0 == ""

所以对于0 == ""

Since 0 is Number and "" is String, return 0 == ToNumber("")

由于0是数字，“”是字符串，所以返回0 == ToNumber(“”)

ToNumber("") returns 0.

ToNumber("")返回0。

Therefore, 0 == 0 once again...

因此，再次0 == 0 ...

面板3-快速回顾 (Panel 3 - Quick Recap)

这是真的 (This is true)

0 == "0" // true

Because coercion turns this into 0 == ToNumber("0").

因为强制将其变为0 == ToNumber("0") 。

这是真的 (This is true)

0 == [] // true

Because coercion runs twice:

由于强制运行两次：

1. ToPrimitive([]) gives empty string

   ToPrimitive([])给出空字符串

2. Then ToNumber("") gives 0.

   然后ToNumber("")给出0。

So then tell me...according to the above rules, what should this return?

那么然后告诉我...根据上述规则，这应该返回什么？

"0" == []

面板4-假！ (Panel 4 - FALSE!)

FALSE! Correct.

假！ 正确。

This part makes sense if you understood the rules.

如果您了解规则，则这部分很有意义。

Here's our comparison:

这是我们的比较：

"0" == [] // false

Referencing the spec once again:

再次参考规格：

If x is String or Number and y is Object, return x == ToPrimitive(y)

如果x是String或Number而y是Object，则返回x == ToPrimitive(y)

That means...

就是说

Since "0" is String and [] is Object, return x == ToPrimitive([])

由于“ 0”是字符串，[]是对象，所以返回x == ToPrimitive([])

ToPrimitive([]) returns empty string. The comparison has now become

ToPrimitive([])返回空字符串。 现在比较已经变成

"0" == ""

"0" and "" are both strings, so JavaScript says no more coercion needed. This is why we get false.

"0"和""都是字符串，因此JavaScript表示不再需要强制 。 这就是为什么我们得到false 。

结论 (Conclusion)

Use triple equals and sleep soundly at night.

使用三重等于并在晚上睡个好觉。

0 === "0" // false
0 === [] // false
"0" === [] // false

It avoids coercion entirely, so I guess it's more efficient too!

它完全避免了强制，所以我想它也更有效！

But the performance increase is almost meaningless. The real win is the increased confidence you'll have in your code, making that extra keystroke totally worth it.

但是性能的提高几乎没有意义。 真正的胜利是您对代码的信心增强，这完全值得这样做。

需要免费辅导吗？ (Want Free Coaching?)

If you'd like to schedule a free 15-30 minute call to discuss Front-End development questions regarding code, interviews, career, or anything else follow me on Twitter and DM me.

如果您想安排15-30分钟的免费电话来讨论有关代码，面试，职业或其他方面的前端开发问题，请在Twitter和DM me上关注我 。

After that if you enjoy our first meeting, we can discuss an ongoing coaching relationship that'll help you reach your Front-End development goals!

之后，如果您喜欢我们的第一次会议，我们可以讨论正在进行的教练关系，这将帮助您实现前端开发目标！

谢谢阅读 (Thanks for reading)

For more content like this, check out https://yazeedb.com!

有关更多内容，请访问https://yazeedb.com！

Until next time!

直到下一次！

翻译自: https://www.freecodecamp.org/news/explaining-the-best-javascript-meme-i-have-ever-seen/

安装meme