A Perplexing Javascript Parsing Puzzle

Hillel Wayne

困惑するJavaScriptの解析パズル

原文は Hillel Wayne により に公開されました。 このブログを購読する

これは何を出力するでしょう?

x
= 1
x
--> 0 

じっくり考えてから、ブラウザのコンソールで試してみてください!答えと解説はドロップダウンの中にあります。

答えを表示

1 と出力されます。

は?なにこれ

行の先頭で(そして行の先頭でのみ)、--> はコメントを開始します。JavaScriptは次のように解析されます

x = 1;
x; // 0 

ブラウザは最後の式の値を表示するので、当然 1 になります。

でも、なぜ?

これはレガシーなハックです。

Netscape Navigator 2はJavaScriptと<script>タグの両方を導入しました。当時広く使われていた古いブラウザ(Navigator 1など)は、<script>の中身が特別なものだとは知らず、ページ上の通常のテキストとして表示していました。グレースフルデグラデーションを確保するため、ウェブ開発者はスクリプトをHTMLコメントブロックで囲んでいました:

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

古いブラウザは中身をHTMLコメントとして解析して無視し、新しいブラウザは中身をJavaScriptとして解析して実行しました。<!---->がなぜ構文エラーにならなかったのかは、私にもよく分かりません。おそらくJSエンジン側でそれらを処理する特別なコードがあったのでしょうが、どこにあるのか突き止められませんでした。

現代のブラウザは少なくとも<script>を認識します。1しかし、一部の古いウェブサイトでは今でもこのハックが残っており、標準化委員会はウェブを決して絶対に壊すことはないため、<!---->を正当なコメントトークンとして2015年の標準に追加しました。

<!---->はどちらも//のように振る舞い、すなわち行コメントを開始します。-->は行の先頭でのみ有効です(後置デクリメントに続く大なり演算子との曖昧さを避けるため)。一方<!--は行内のどこにでも記述できます。 — MDN Web Docs

ウェブブラウザはこの構文をサポートすることが求められていますが、他のエンジンには求められていません。ただしNodeとElectronはChromiumのV8エンジンを共有しているため、どちらもサポートしています。


  1. Lynxのようなテキスト専用ブラウザはタグを認識しますが、内容を無視するだけです。[return]

この記事は「muse-spark-1.2-contributor」を使用して翻訳されました。

コメント