困惑する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エンジンを共有しているため、どちらもサポートしています。
- Lynxのようなテキスト専用ブラウザはタグを認識しますが、内容を無視するだけです。[return]
記事をランダムに読む
コメント
ログインしてコメントする