JavaScript 还有第三种注释?--> 竟然合法

JavaScript 中藏了十年的秘密注释语法

看下面这段代码:

javascript 复制代码
x
= 1
x
--> 0

猜猜输出是什么?

答案是 1

不是 0,也不是报错。就是 1

这个谜题来自 Hillel Wayne 的博客

为什么不是 0?

因为 --> 在行首的时候,是一个注释符号

对,你没看错。JavaScript 除了 ///* */,还有第三种注释语法:-->。只不过它有个限制:必须出现在行首。

所以上面的代码实际被解析成了:

javascript 复制代码
x = 1;
x;
// --> 0 这行被当成注释了

最后一个表达式是 x,值是 1,所以输出 1

这玩意儿哪来的?

得从二十多年前说起。

早期的浏览器(IE 3、Netscape 2 那个年代)刚开始支持 JavaScript,但很多旧浏览器根本不认识 <script> 标签。为了让这些老古董不把 JavaScript 代码当成页面内容显示出来,开发者想了个办法:把代码包在 HTML 注释里。

html 复制代码
<script>
<!--
console.log("hello world!")
-->
</script>

旧浏览器看到 <!-- 就当 HTML 注释跳过了,新浏览器则正常执行 JavaScript。

问题来了:新浏览器要执行 JavaScript,但 <!----> 本身不是 JavaScript 语法啊。怎么办?

答案是:让 JavaScript 引擎把它们当注释处理。

标准化了吗?

标准化了。

ECMAScript 2015(ES6)正式把 <!----> 写进了规范,作为合法的注释 token。规范里特别说明:"--> 只在行首有效,避免和后缀递减运算符混淆"。

想想也是。如果 --> 在任何位置都是注释,那 x-- > 0 这种正常代码就没法写了。

浏览器必须支持,Node.js 不用

这里有个细节:规范只要求浏览器环境支持这个语法。Node.js、Deno、Bun 这些非浏览器的 JavaScript 运行时不强制要求。

实际测试一下:

javascript 复制代码
// 浏览器控制台
x = 1
--> 0
// 输出 1

// Node.js
x = 1
--> 0
// SyntaxError: Unexpected token '>'

Node.js 直接报语法错误。所以这个"特性"只在浏览器里生效。

还有 <!--

既然 --> 是注释,<!-- 也是。

javascript 复制代码
<!-- 这是注释
console.log("hello") <!-- 这也是注释

<!-- 的行为和 // 一样,后面的内容都被忽略。

为什么现在还保留?

向后兼容。

虽然现在没人会这么写代码,但互联网上可能还存在一些上古网页用了这个写法。浏览器厂商不敢删,万一删了哪个政府网站挂了呢。

这就是 JavaScript 的日常------背着二十年的历史包袱往前跑。

实际有什么用?

没用。纯粹是个冷知识。

但下次面试官问你"JavaScript 有几种注释方式",你可以微微一笑,说三种。


如果你觉得这篇文章有帮助,欢迎关注我的 GitHub,下面是我的一些开源项目:

Claude Code Skills (按需加载,意图自动识别,不浪费 token,介绍文章):

全栈项目(适合学习现代技术栈):

  • prompt-vault - Prompt 管理器,用的都是最新的技术栈,适合用来学习了解最新的前端全栈开发范式:Next.js 15 + React 19 + tRPC 11 + Supabase 全栈示例,clone 下来配个免费 Supabase 就能跑
  • chat_edit - 双模式 AI 应用(聊天+富文本编辑),Vue 3.5 + TypeScript + Vite 5 + Quill 2.0 + IndexedDB
相关推荐
韩曙亮2 分钟前
【Web APIs】浏览器本地存储 ② ( window.sessionStorage 本地存储常用 API 简介 | 代码示例 )
开发语言·前端·javascript·localstorage·sessionstorage·web apis·浏览器本地存储
0_14 分钟前
封装了一个vue版本 Pag组件
前端·javascript·vue.js
Code知行合壹9 分钟前
Vue.js进阶
前端·javascript·vue.js
摸鱼的春哥14 分钟前
企业自建低代码平台正在扼杀AI编程的生长
前端·javascript·后端
-凌凌漆-16 分钟前
【JS】var与let的区别
开发语言·前端·javascript
千寻girling23 分钟前
Vue.js 前端开发实战 ( 电子版 ) —— 黑马
前端·javascript·vue.js·b树·决策树·随机森林·最小二乘法
困惑阿三26 分钟前
利用 Flexbox 实现无需媒体查询(Media Queries)的自动响应式网格。
开发语言·前端·javascript
浩冉学编程31 分钟前
html中在某个父元素动态生成列表子元素,添加点击事件,利用事件委托
前端·javascript·html
OpenTiny社区36 分钟前
TinyPro v1.4 空降:Spring Boot 集成,后端兄弟也能愉快写前端!
前端·javascript·vue.js
古迪红尘1 小时前
el-tree 采用懒加载方式,怎么初始化就显示根节点和下级节点
前端·javascript·vue.js