Javascript 为什么结果是 ('b'+'a'+ + 'a' + 'a').toLowerCase() 'banana'？

Why is the result of ('b'+'a'+ + 'a' + 'a').toLowerCase() 'banana'?

提问by HV Sharma

I was practicing some JavaScript when one of my friends came across this JavaScript code:

当我的一位朋友遇到以下 JavaScript 代码时，我正在练习一些 JavaScript：

document.write(('b' + 'a' + + 'a' + 'a').toLowerCase());

The above code answers "banana"! Can anyone explain why?

上面的代码回答了"banana"！谁能解释为什么？

采纳答案by SOFe

+'a'resolves to NaN("Not a Number") because it coerces a string to a number, while the character acannot be parsed as a number.

+'a'解析为NaN("Not a Number") 因为它将字符串强制转换为数字，而该字符a无法解析为数字。

document.write(+'a');

小写它变成bananabanana.

Adding NaNto "ba"turns NaNinto the string "NaN"due to type conversion, gives baNaN. And then there is an abehind, giving baNaNa.

由于类型转换，添加NaN到"ba"变成NaN字符串"NaN"，给出baNaN. 然后有一个a背后，给予baNaNa。

The space between + +is to make the first one string concatenation and the second one a unary plus (i.e. "positive") operator. You have the same result if you use 'ba'+(+'a')+'a', resolved as 'ba'+NaN+'a', which is equivalent to 'ba'+'NaN'+'a'due to type juggling.

之间的空格+ +是使第一个字符串连接和第二个一元加（即“正”）运算符。如果使用'ba'+(+'a')+'a', 解析为'ba'+NaN+'a'，则会得到相同的结果，这相当于'ba'+'NaN'+'a'由于类型杂耍。

document.write('ba'+(+'a')+'a');

回答by Tyler Roper

'b' + 'a' + + 'a' + 'a'

...is evaluated as....

...被评估为....

('b') + ('a') + (+'a') + ('a')

^{(see: operator precedence)}

^{（参见：运算符优先级）}

(+'a')attempts to convert 'a'to a number using the unary plus operator. Because 'a'is not a number, the result is NaN("Not-A-Number"):

(+'a')尝试'a'使用一元加号运算符转换为数字。因为'a'不是数字，结果是NaN（"Not-A-Number"）：

'b'  +  'a'  +  NaN  + 'a'

Although NaNstands for "Not a Number", it's still a numeric type; when added to strings, it concatenates just as any other number would:

虽然NaN代表“Not a Number”，但它仍然是一个数字类型；添加到字符串时，它会像任何其他数字一样连接：

'b'  +  'a'  +  NaN  + 'a'  =>  'baNaNa'

Finally, it's lowercased:

最后，它是小写的：

'baNaNa'.toLowerCase()      =>  'banana'

回答by Taslim Oseni

('b' + 'a' + + 'a' + 'a').toLowerCase()

For clarity, let's break this down into two steps. First, we get the value of the parenthesized expression and then we apply the toLowerCase()function on the result.

为了清楚起见，让我们将其分解为两个步骤。首先，我们获得带括号的表达式的值，然后将toLowerCase()函数应用于结果。

Step one

步骤1

'b' + 'a' + + 'a' + 'a'

Going L-R, we have:

去LR，我们有：

• 'b' + 'a'returns ba, this is regular concatenation.
• ba + + 'a'attempts to concatenate bawith + 'a'. However, since the unary operator +attempts to convert its operand into a number, the value NaNis returned, which is then converted into a string when concatenated with the original ba- thus resulting in baNaN.
• baNaN+ 'a' returns baNaNa. Again, this is regular concatenation.
  
  

• 'b' + 'a'返回ba，这是常规连接。
• ba + + 'a'尝试将ba与+ 'a'. 但是，由于一元运算符+尝试将其操作数转换为数字，因此返回值NaN，然后在与原始ba连接时将其转换为字符串- 从而导致baNaN。
• baNaN+ 'a' 返回baNaNa。同样，这是常规串联。
  
  

At this stage, the result from step one is baNaNa.

在这个阶段，第一步的结果是baNaNa。

Step two

第二步

Applying .toLowerCase()on the value returned from step one gives:

应用.toLowerCase()从第一步返回的值给出：

banana

香蕉

There are many similar punsin JavaScript that you can check out.

JavaScript 中有许多类似的双关语，您可以查看。

回答by Neel Rathod

It's just because of +operator.

这只是因为 +运算符。

We can get further knowledge from chunk it.

我们可以从 chunk it 中获得更多的知识。

=> ( ('b') + ('a') + (++) + ('a') + ('a'))
=> ( ('b') + ('a') + (+) + ('a') + ('a')) // Here + + convert it to +operator 
Which later on try to convert next character to the number.

For example

例如

const string =  '10';

You can convert a string into number by 2 ways:

您可以通过两种方式将字符串转换为数字：

1. Number(string);
2. +string;

1. 数字（字符串）；
2. +字符串；

So back to the original query; Here it tries to convert the next char ('a') to the number but suddenly we got error NaN,

所以回到原来的查询；在这里它尝试将下一个字符 ('a') 转换为数字，但突然我们得到了错误 NaN，

( ('b') + ('a') + (+'a') + ('a'))
( ('b') + ('a') + NaN + ('a'))

But it treats as a string because the previous character was in the string. So it will be

但它被视为一个字符串，因为前一个字符在字符串中。所以它会

( ('b') + ('a') + 'NaN' + ('a'))

And last it converts it to toLowerCase(), So it would be banana

最后将它转换为 toLowerCase()，所以它会是香蕉

If you are put number next to it, Your result will be change.

如果你在它旁边放了数字，你的结果将会改变。

( 'b' + 'a' +  + '1' + 'a' ) 

It would be 'ba1a'

这将是'ba1a'

const example1 = ('b' + 'a' + + 'a' + 'a').toLowerCase(); // 'banana' 
const example2 = ('b' + 'a' + + '1' + 'a').toLowerCase(); // 'ba1a'
console.log(example1);
console.log(example2);

回答by Travis J

This line of code evaluates an expression and then calls a method based on the returned value.

这行代码计算一个表达式，然后根据返回值调用一个方法。

The expression ('b' + 'a' + + 'a' + 'a')is solely composed of string literals and addition operators.

该表达式('b' + 'a' + + 'a' + 'a')仅由字符串文字和加法运算符组成。

• String Literals"A string literal is zero or more characters enclosed in single or double quotes."
• The Addition operator ( + )"The addition operator either performs string concatenation or numeric addition."

• 字符串文字“字符串文字是用单引号或双引号括起来的零个或多个字符。”
• 加法运算符 ( + )“加法运算符执行字符串连接或数字加法。”

An implicit action taken is the call for ToNumber on a string

采取的隐式操作是在字符串上调用 ToNumber

• ToNumber Applied to the String Type"ToNumber applied to Strings applies grammar to the input String. If the grammar cannot interpret the String as an expansion of StringNumericLiteral, then the result of ToNumber is NaN."

• ToNumber 应用于字符串类型“应用于字符串的 ToNumber 将语法应用于输入字符串。如果语法不能将字符串解释为 StringNumericLiteral 的扩展，则 ToNumber 的结果是 NaN。”

The interpreter has rules of how to parse the expression, by breaking it down into its components of left and right hand expressions.

解释器有关于如何解析表达式的规则，方法是将其分解为左右手表达式的组件。

---

---

Step 1: 'b' + 'a'

第1步： 'b' + 'a'

Left Expression: 'b'
Left Value: 'b'

左表达式：'b'
左值：'b'

Operator: + (one of the expression sides is a string, so string concatenation)

运算符：+（表达式的一侧是字符串，所以字符串连接）

Right Expression: 'a'Right Value: 'a'

正确的表达式：'a'正确的值：'a'

Result: 'ba'

结果： 'ba'

---

---

Step 2: 'ba' + + 'a'

第2步： 'ba' + + 'a'

Left Expression: 'ba'
Left Value: 'ba'

左表达式：'ba'
左值：'ba'

Operator: + (one of the expression sides is a string, so string concatenation)

运算符：+（表达式的一侧是字符串，所以字符串连接）

Right Expression: + 'a'(this evaluates the Math Value of the character 'a' assuming that it is a positive number from the + sign -- the minus sign would have also worked here indicating a negative number -- which results in NaN)
Right Value: NaN (because the operator is string concatenation, toString is called on this value during concatenation)

右表达式：（+ 'a'假设它是来自 + 号的正数，则计算字符 'a' 的数学值 - 减号也可以在这里表示负数 - 结果为 NaN）
正确值： NaN（因为操作符是字符串拼接，拼接时对这个值调用toString）

Result: 'baNaN'

结果：'baNaN'

---

---

Step 3: 'baNaN' + 'a'

第 3 步： 'baNaN' + 'a'

Left Expression: 'baNaN'
Left Value: 'baNaN'

左表达式：'baNaN'
左值：'baNaN'

Operator: + (one of the expression sides is a string, so string concatenation)

运算符：+（表达式的一侧是字符串，所以字符串连接）

Right Expression: 'a'
Right Value: 'a'

正确的表达式：'a'
正确的值：'a'

Result: 'baNaNa'

结果：'baNaNa'

---

---

After this the grouping expression has been evaluated, and toLowerCase is called which leaves us with banana.

在此之后，分组表达式被评估，并且 toLowerCase 被调用，这给我们留下了香蕉。

回答by Alireza

Using + will convert any value to Number in JavaScript!

在 JavaScript 中使用 + 会将任何值转换为数字！

So...

所以...

The main thing here to know first and learn from is using +before any value in JavaScript, will convert that value to a number, but if that value can not be converted, JavaScript engine will return NaN, which means, not a number(can not be converted to a number, mate!) and the rest of story as below:

这里首先要知道和学习的主要内容是+在 JavaScript 中的任何值之前使用，将该值转换为数字，但如果该值无法转换，JavaScript 引擎将返回NaN，这意味着，不是数字（不能转换为数字，伙计！）和故事的其余部分如下：

回答by rprakash

Read more about NaN at W3Schoolsor Mozilla Developer Network

在W3Schools或Mozilla Developer Network阅读有关 NaN 的更多信息

回答by Rakibul Islam

See the magic here. Second plus is an unary operator which gives 'NaN'

看看这里的魔法。第二个加号是一个一元运算符，它给出“NaN”

console.log(('b' + 'a' + + 'a' + 'a').toLowerCase());
console.log(('b' + 'a' + + 'a' + 'a'));
console.log(('b' + 'a' + 'a' + 'a').toLowerCase());