你可能在網上見過有人用 幾個不同的字元寫的各種稀奇古怪的 JavaScript 程式碼，雖然看起來奇怪，但是能正常執行！比如這個：

(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]

你猜執行結果是什麼？你可以自己去控制檯試一下。

看起來很神奇，但這到底是怎麼回事呢?

事實上，你幾乎可以用下面這 6 個字元寫出任意的 JavaScript 程式：

[]()!+

很多人都知道這個技巧，但是沒有多少開發人員知道它到底是如何工作的。今天，我們就來看看它背後的執行原理。我們的目標是用這幾個字元來寫出字串“self”

。姑且用這個字串向 Self 語言致敬，JavaScript 的靈感來源之一就是它。

基本原理

我們之所以能夠拋開其他字元不用，要歸功於 JavaScript 的型別系統和資料型別轉換機制。

這 6 個字元是這樣各顯神通的：[]可以用來建立陣列，!和+可以在陣列上執行一些操作，再用()給這些操作分組。

先看一個簡單的陣列：

[]

陣列前加上!會把它轉成布林值。陣列被認為是真值，因此取非之後變成了false：

![] === false

除非轉換為類似型別，否則無法將不同型別的值加在一起。JavaScript 在進行轉換時遵循一個預定義的規則：

在表示式2 + true中，JavaScript 會將true

轉成數字，得到表示式2+1。

在表示式2 + "2"中，JavaScript 會將數字轉成字串，得到2 + "2" === "22"。

這些轉換規則還不算糟糕，但是對於其他型別，好戲馬上來了。

JavaScript 陣列強制轉換

陣列相加會轉換成字串並連線起來。空陣列轉換為空字串，因此將兩個陣列相加將得到空字串。

[] + [] === "" + "" === ""

陣列跟其他型別值相加時也一樣：

![] + [] === "false" + "" === "false"
 

驚不驚喜？我們得到了目標字串"self"所包含的幾個字元！

如果我們能產生一些數字，就可以按正確的順序提取所需的字元：

"false"[3] === "s"

(![] + [])[3] === "s"

那麼，如何生成數字呢？

生成數字

前面提到了，可以把陣列轉成布林值。那如果用加號+把它轉成數字會怎樣？

+[] === ???

JavaScript 會嘗試呼叫陣列的valueOf方法，但是發現不存在這個方法，然後就轉而呼叫toString() 方法了。因此上面的程式碼等效於：

+[] === +""

將字串轉換為數字將產生以下結果：

+"42" === 42
+"esg" == NaN
+"" === 0

空字串是一個 false值，跟 null，undefined和數字零類似，因此將其中任何一個轉換為數字都會變成零：

+null === 0
+undefined === 0
+false === 0
+NaN === 0
+"" === 0

因此，將陣列轉換為數字需要先將其轉換為字串，最後轉成 0：

+[] === +"" === 0

第一個數字已經造出來了！我們還需要更多數字，繼續：

!0 === !false
!false === true

!0 === true

將 0 取否就得到一個為真的布林值。為真的布林值轉成數字，就是1：

+true === 1

有了 1，自然就可以得到2，所謂道生一，一生二，二生三，三生萬物……

用上面的轉換大法，可以輕鬆得到我們想要的這些數字：

1 === +true == +(!0) ==== +(!(+[])) === +!+[]

1 === +!+[]
2 === +!+[] +!+[]
3 === +!+[] +!+[] +!+[]
4 === +!+[] +!+[] +!+[] +!+[]

臨門一腳，大功告成

總結下這些規則：

• 陣列屬於真值，取否就得到 false： ![] // false
• 陣列相加時會轉換成字元：[] + [] // ""
• 空陣列轉成數字得到 0，再去否得到 true，再轉成數字得到1：+(!(+[])) === 1

根據這些規則，我們就能得到想要的字串。看下面這個示意圖就很清楚了：

![] + [] === "false"
+!+[] === 1

(![] + [])[3] + (![] + [])[4] + (![] + [])[2] + (![] + [])[0]
^^^^^^^^^^      ^^^^^^^^^^      ^^^^^^^^^^      ^^^^^^^^^^      
  "false"         "false"         "false"         "false"       

^^^^^^^^^^^^^   ^^^^^^^^^^^^^   ^^^^^^^^^^^^^   ^^^^^^^^^^^^^    
      s               e               l               f         

最終的表示式就是這樣：

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

整理下空格和換行，就是一行程式碼：

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

現在你應該明白了那些神奇 JavaScript 程式碼的原理了吧？發揮你的想象，看還能寫出其他什麼來？比如，2020 年剛到，來個 “Happy New Year”？

Anyway，Happy New Year！

更多前端技術乾貨盡在微信公眾號：1024譯站

相關推薦