JS注解如何标注枚举值？

JavaScript 虽然没有像 Java 那样的原生注解语法，但开发者可通过 JSDoc 注释、TypeScript 枚举配合元数据装饰器（如 reflect-metadata）、结构化对象字面量（含 value/label/color 等字段）或常量枚举加映射表等多种灵活方式，为枚举值添加语义化标注——无论你是追求 IDE 智能提示、运行时动态读取，还是兼顾可维护性与前端展示需求，都能找到适配项目现状的轻量高效方案。

JavaScript 本身没有“注解”（Annotation）这一语法特性，像 Java 中的注解那样直接标注枚举值在 JS 中并不存在。但如果你是在使用 TypeScript 或结合一些现代框架（如 Angular、TypeScript Decorators 等），那么可以实现类似“标注枚举值”的效果。

1. 使用 TypeScript 枚举配合 JSDoc 注释

虽然 JS 不支持原生注解，但你可以通过 JSDoc 在 JavaScript 或 TypeScript 文件中为枚举值添加描述性信息，供 IDE 提示或文档生成工具使用。

/\*\*
 \* 用户状态枚举
 \*/
const UserStatus = {
  /** 账号已激活 */
  ACTIVE: 'active',
  /** 账号被禁用 */
  INACTIVE: 'inactive',
  /** 账号待审核 */
  PENDING: 'pending'
};

这样在调用处，鼠标悬停时 IDE 会显示对应说明，起到“标注”的作用。

2. 使用 TypeScript 枚举 + 自定义元数据（通过装饰器）

TypeScript 支持实验性的装饰器（Decorators），可以结合 reflect-metadata 库为类或属性添加元数据。虽然不能直接装饰枚举值，但可以通过封装类的方式来实现。

示例：使用类来模拟带标注的枚举

import "reflect-metadata";
<p>function Label(label: string) {
return function(target: any, propertyKey: string) {
Reflect.defineMetadata("label", label, target, propertyKey);
};
}</p><p>class UserStatus {
@Label("激活状态")
static ACTIVE = 'active';</p><p>@Label("禁用状态")
static INACTIVE = 'inactive';
}</p><p>// 获取标注
const label = Reflect.getMetadata("label", UserStatus, "ACTIVE");
console.log(label); // 输出：激活状态
</p>

这种方式适合需要运行时读取“注解”信息的场景，比如表单渲染、状态展示等。

3. 使用对象字面量 + 元数据字段

更实用的方式是将枚举值与标签、颜色、描述等信息一起组织成对象结构。

示例：

const OrderStatus = {
  PENDING: { value: 'pending', label: '待支付', color: '#ffa500' },
  PAID: { value: 'paid', label: '已支付', color: '#008000' },
  CANCELLED: { value: 'cancelled', label: '已取消', color: '#ff0000' }
};
<p>// 使用
console.log(OrderStatus.PAID.label); // 已支付
</p>

这种模式在前端项目中非常常见，本质上是用对象模拟“带标注的枚举”，清晰且易于维护。

4. TypeScript 常量枚举配合辅助函数

如果你坚持使用 TS 的 enum，可以配合一个映射函数来实现标注。

enum LogLevel {
  DEBUG,
  INFO,
  WARN,
  ERROR
}
<p>const LogLabel: { [key: number]: string } = {</p><p>};</p><p>console.log(LogLabel<a target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq6yjal9oo9-tKa8eoZ1jaeynYeqhra5boW5hWSzhYZ6s3yOc4Kij3qytrx-gpuMmbGHh6aKzLmyhc-nmqurfZ6ua4qcfn2gr7Oqu22CeYjesYiVzZHdrW6HqptkvIZ9Z76zhaqKjY-is9CzbQ' rel='nofollow'>LogLevel.WARN</a>); // 输出：警告信息
</p>

这种方法保持了 enum 的简洁性，又实现了“标注”功能。

基本上就这些方法。JavaScript 没有原生注解机制，但通过 JSDoc、对象封装、TypeScript 枚举加映射等方式，完全可以实现对枚举值的标注需求。选择哪种方式取决于你是否使用 TypeScript、是否需要运行时元数据，以及项目的复杂度。

文中关于JS性能,js注解教程的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS注解如何标注枚举值？》文章吧，也可关注golang学习网公众号了解相关技术文章。