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
相关推荐
会跑的葫芦怪20 小时前
若依Vue 项目多子路径配置
前端·javascript·vue.js
xiaoqi92221 小时前
React Native鸿蒙跨平台如何进行狗狗领养中心,实现基于唯一标识的事件透传方式是移动端列表开发的通用规范
javascript·react native·react.js·ecmascript·harmonyos
jin12332221 小时前
React Native鸿蒙跨平台剧本杀组队消息与快捷入口组件,包含消息列表展示、快捷入口管理、快捷操作触发和消息详情预览四大核心功能
javascript·react native·react.js·ecmascript·harmonyos
烬头88211 天前
React Native鸿蒙跨平台实现二维码联系人APP(QRCodeContactApp)
javascript·react native·react.js·ecmascript·harmonyos
pas1361 天前
40-mini-vue 实现三种联合类型
前端·javascript·vue.js
2601_949833391 天前
flutter_for_openharmony口腔护理app实战+预约管理实现
android·javascript·flutter
军军君011 天前
Three.js基础功能学习十三:太阳系实例上
前端·javascript·vue.js·学习·3d·前端框架·three
xiaoqi9221 天前
React Native鸿蒙跨平台如何实现分类页面组件通过searchQuery状态变量管理搜索输入,实现了分类的实时过滤功能
javascript·react native·react.js·ecmascript·harmonyos
qq_177767371 天前
React Native鸿蒙跨平台实现应用介绍页,实现了应用信息卡片展示、特色功能网格布局、权限/联系信息陈列、评分展示、模态框详情交互等通用场景
javascript·react native·react.js·ecmascript·交互·harmonyos
2603_949462101 天前
Flutter for OpenHarmony社团管理App实战:预算管理实现
android·javascript·flutter