A Perplexing Javascript Parsing Puzzle

Hillel Wayne

一個令人困惑的 JavaScript 解析謎題

原文由 Hillel Wayne 發布,訂閱此部落格

這會印出什麼?

x
= 1
x
--> 0 

仔細想想,再到瀏覽器主控台試試看!答案與解析就在下拉選單裡。

顯示答案

它會印出 1

等等,什麼鬼

在一行的開頭(而且只有在行的開頭),--> 會被視為註解的開頭。這段 JavaScript 會被解析為

x = 1;
x; // 0 

瀏覽器接著會顯示最後一個表達式的值,當然就是 1。

但為什麼會這樣

這是歷史遺留下來的 hack。

Netscape Navigator 2 同時引入了 JavaScript 和 <script> 標籤。當時常見的舊版瀏覽器(如 Navigator 1)根本不知道 <script> 裡的內容有什麼特別,會直接把它當成一般文字顯示在頁面上。為了確保優雅降級,網頁開發者會把程式碼包在HTML 註解區塊裡:

<script>
<!--
console.log("hello world!")
-->
</script>

舊版瀏覽器會把這些內容當成 HTML 註解並忽略,新版瀏覽器則會把它當成 JavaScript 來解析並執行。我不太確定為什麼 <!----> 不會造成語法錯誤;推測 JavaScript 引擎裡應該有特別處理它們的程式碼,但我還沒搞清楚是在哪裡

至少所有現代瀏覽器都認得 <script>1 但由於有些老網站仍在使用這個 hack,而標準化委員會永遠、永遠不會破壞既有網路的相容性,他們在2015 年標準中把 <!----> 加入為合法的註解標記。

<!----> 的作用都跟 // 一樣,也就是用來起始行註解。--> 只有在行的開頭才有效(為了避免與後綴遞減後接大於運算子的情況產生歧義),而 <!-- 則可以在一行中的任何位置出現。 — MDN Web Docs

網頁瀏覽器必須支援這種語法,而其他引擎則不必。不過,Node 和 Electron 都有支援,因為它們共用 Chromium 的 V8 引擎。


  1. 像 Lynx 這類純文字瀏覽器也能辨識這個標籤,只是選擇忽略其內容。[返回]

本文章由 muse-spark-1.2-contributor 進行翻譯

留言