为什么以及如何（[！[]] + [] [[]]）[+！+ [] + [+ []]]评估为字母“i”？ [英] Why and how does ([![]]+[][[]])[+!+[]+[+[]]] evaluate to the letter "i"?

问题描述

在阅读这篇文章发布在dzone上时，我发现了一小段JavaScript 由Marcus Lagergren在Twitter上发布。

While reading this article posted on dzone I found a snippet of JavaScript originally posted on Twitter by Marcus Lagergren.

以下代码显然打印字符串fail

The following code apparently prints the string "fail"

(![]+[])[+[]]+(![]+[])[+!+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]];

这涉及隐式类型转换，我试图理解这条线的解释方式。

This involves implicit type casting and I'm trying to understand how exactly this line is interpreted.

我已经隔离了每个字符

• （！[ ] + []）[+ []] 打印f


• （！[] + []）[+！+ []] 打印a


• （[！[]] + [] [[]]）[+！+ [] + [+ []]] 打印i


• （！[] + []）[！+ [] +！+ []] 打印l

• (![]+[])[+[]] prints "f"
• (![]+[])[+!+[]] prints "a"
• ([![]]+[][[]])[+!+[]+[+[]]] prints "i"
• (![]+[])[!+[]+!+[]] prints "l"

我还设法打破了返回每个字母的表达式i

I've also managed to break down the expressions returning each letter apart from "i"

！[] 空数组是一个Object，根据ECMAScript文档，第9.2点评估为 true 时转换为布尔所以这是 false

![] an empty array is an Object, which according to ECMAScript documentation, point 9.2 evaluates to true when converted to a boolean so this is false

false + [] 按第11.6.1节二进制的两个参数 + 运算符转换为String，因此我们得到false+，它评估false

false+[] as per Point 11.6.1 both arguments of the binary + operator get converted to String, therefore we get "false"+"", which evaluates "false"

+ [] 一元加号运算符导致 ToNumber 转换后跟 ToPrimitive 转换，如果参数是 Object 。通过调用对象的 [[DefaultValue]] 内部方法来确定此类转换的结果。如果是空数组，则默认为 0 。
（ECMAScript文档，部分： 11.4.6 ，< a href =http://www.ecma-international.org/ecma-262/5.1/#sec-9.3> 9.3 ，9.1 ）

+[] a unary plus operator causes a ToNumber conversion followed by a ToPrimitive conversion if the argument is an Object. The result of such conversion is determined by calling the [[DefaultValue]] internal method of the object. In case of an empty array, it defaults to 0. (ECMAScript Documentation, sections: 11.4.6, 9.3, 9.1 )

false[0] 我们正在访问索引 0 的字符，因此f

"false"[0] we're accessing the character at index 0, hence the "f"

同样的故事，这里唯一的区别是额外的方括号中的部分转换（其值为一个数字，指向字符串false中的另一个字符），由使用一元 + 和！运营商。

Same story, the only difference here are additional conversions in the part in square brackets (which evaluates to a number to point at another character in the string "false"), triggered by the use of unary + and ! operators.

+ [] 评估为 0 ，如上所述。

！ 0 评估为<$ href =http://www.ecma-international.org/ecma-262/5.1/中定义的 true ＃sec-9.2>第9.2节和第11.4.9节。首先，将 0 转换为布尔值 false ，然后运算符将该值反转。

!0 evaluates to true as defined in Section 9.2 and Section 11.4.9. First, 0 is converted to a boolean false and then the operator inverts the value.

+ true 再次，一元加号触发 ToNumber 转换，返回 1 for binary true
（第11.4.6节和 9.3 ）

+true again, the unary plus triggers a ToNumber conversion, which returns a 1 for binary true (Section 11.4.6 and 9.3)

false[1] 返回字符串中的第二个字符，a

"false"[1] returns the second character in the string, which is "a"

！+ [] 评估为 true ，如上所述

true + true 在原语上使用二进制 + 会触发 ToNumber 转换。如果为true，则结果为 1 和 1 + 1 等于 2

true+true using the binary + on primitives triggers a ToNumber conversion. In case of true, its result is 1 and 1+1 equals 2

false[2] - 自我解释

让我难过的是字母 i 的。我可以看到第二部分（在方括号中）计算字符串10并且第一部分（在括号中）返回falseundefined 但是我无法对这种情况如何做出正面或反面。有人可以一步一步解释吗？特别是方括号中出现的魔力？ （数组和数组访问）

What leaves me stumped is the letter "i". I can see that the second part (in square brackets) evaluates to the string "10" and that the first part (in parentheses) returns "falseundefined" but I can't make heads or tails of how this is happening. Could someone explain it step by step? Especially the magic that happens with square brackets? (arrays and array access)

如果可能，我希望每个步骤都包含指向基础ECMAScript规则的链接。

If possible, I'd like each step to contain a link to the underlying ECMAScript rules.

我发现最神秘的是这部分： [] [[]]

What I find the most cryptic is this part: [][[]]

推荐答案

如果你稍微改写一下，你的神秘部分并不是那么神秘：

Your cryptic part isn't all that cryptic if you rewrite it a little:

[]['']

[] 将被强制转换为字符串，因为它不是整数，因此您正在寻找 [] 名称为''（空字符串）。您将获得 undefined ，因为没有具有该名称的属性。

[] will be coerced into a string because it isn't an integer, so you're looking for a property of [] with the name '' (an empty string). You'll just get undefined, as there is no property with that name.

至于实际的字母，将表达式分解为两个主要组成部分：

As for the actual letter, break the expression up into the two main components:

• 字符串（[！[]] + [] [ []]）：
  
  
  
  
  • [！[]] 是 [false] 。
  
  
  • [] [[]] 是 undefined 。
  
  
  • 将它们组合在一起就可以得到 falseundefined。
  
  
  • The string ([![]]+[][[]]):
    • [![]] is [false].
    • [][[]] is undefined.
    • Add them together and you get "falseundefined".
    
    
    • [+ []] [0] 。
    
    
    • + [] 将 [] 强制转换为整数，所以你得到 0 。
    
    
    • ！+ [] 强制 0 到一个布尔值并否定它，所以你得到 true 。
    
    
    • +！+ [] 将 true 强制转换为整数，这样就得到 1 。
    
    
    • 将它们组合在一起，即可获得 [10] 。
    
    
    • [+[]] is [0].
    • +[] coerces [] to an integer, so you get 0.
    • !+[] coerces 0 to a boolean and negates it, so you get true.
    • +!+[] coerces true to an integer, so you get 1.
    • Add them together, and you get ["10"].

    使用字符串访问数组的属性时，字符串恰好是一个元素对于数组，字符串被强制转换为整数，然后返回数组的实际元素：

    When using a string to access the properties of the array and the string happens to be an element of the array, the string is coerced into an integer and you get back the actual element of the array:

    > [1, 2, 3]["0"]
    1
    > [1, 2, 3]["1"]
    2
    

    所以你的最终结果是：

    > "falseundefined"["10"]
    "i"
    

    读取这个答案，解释 [false] + undefined 部分。

    这篇关于为什么以及如何（[！[]] + [] [[]]）[+！+ [] + [+ []]]评估为字母“i”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！