JSDoc 基础语法 #
注释的基本格式 #
JSDoc 注释块 #
JSDoc 注释以 /** 开始,以 */ 结束:
javascript
/**
* 这是一个 JSDoc 注释块
* 可以跨越多行
* 每行通常以星号开头
*/
与普通注释的区别 #
javascript
// 这是单行注释,不会被 JSDoc 解析
/*
* 这是多行注释
* 也不会被 JSDoc 解析
*/
/**
* 这是 JSDoc 注释
* 以 /** 开始(两个星号)
* 会被 JSDoc 解析生成文档
*/
注释位置 #
注释应该放在要描述的代码之前:
javascript
/**
* 计算两数之和
*/
function add(a, b) {
return a + b;
}
/**
* 用户名称
*/
const userName = 'John';
/**
* 配置对象
*/
const config = {
/**
* API 基础地址
*/
baseURL: '/api',
/**
* 请求超时时间
*/
timeout: 5000
};
描述文本 #
简短描述 #
第一行通常是简短描述:
javascript
/**
* 计算两个数字的和
*/
function add(a, b) {
return a + b;
}
详细描述 #
可以在简短描述后添加详细描述:
javascript
/**
* 计算两个数字的和
*
* 该函数接受两个数字参数,返回它们的和。
* 支持整数和浮点数运算。
*
* @param {number} a - 第一个数字
* @param {number} b - 第二个数字
* @returns {number} 两数之和
*/
function add(a, b) {
return a + b;
}
Markdown 格式 #
描述支持 Markdown 格式:
javascript
/**
* 格式化日期
*
* 将日期对象格式化为指定格式的字符串。
*
* 支持的格式:
* - `YYYY` - 四位年份
* - `MM` - 两位月份
* - `DD` - 两位日期
*
* @param {Date} date - 日期对象
* @param {string} format - 格式字符串
* @returns {string} 格式化后的日期字符串
*
* @example
* // 返回 '2024-01-15'
* formatDate(new Date(2024, 0, 15), 'YYYY-MM-DD')
*/
function formatDate(date, format) {
// ...
}
常用标签 #
@param 参数标签 #
描述函数参数:
javascript
/**
* @param {类型} 参数名 - 描述
*/
// 基本用法
/**
* @param {string} name - 用户名
*/
function greet(name) {
return `Hello, ${name}`;
}
// 带默认值的参数
/**
* @param {string} [name='Guest'] - 用户名,默认为 'Guest'
*/
function greet(name = 'Guest') {
return `Hello, ${name}`;
}
// 可选参数
/**
* @param {string} name - 用户名
* @param {number} [age] - 年龄(可选)
*/
function createUser(name, age) {
// ...
}
// 对象参数的属性
/**
* @param {Object} user - 用户对象
* @param {string} user.name - 用户名
* @param {number} user.age - 年龄
* @param {string} [user.email] - 邮箱(可选)
*/
function saveUser(user) {
// ...
}
// 解构参数
/**
* @param {Object} options - 配置选项
* @param {string} options.url - 请求地址
* @param {string} [options.method='GET'] - 请求方法
* @param {Object} [options.headers] - 请求头
*/
function request({ url, method = 'GET', headers }) {
// ...
}
@returns 返回值标签 #
描述函数返回值:
javascript
/**
* @returns {类型} 描述
*/
// 基本用法
/**
* @returns {number} 两数之和
*/
function add(a, b) {
return a + b;
}
// 返回对象
/**
* @returns {Object} 用户信息对象
* @returns {string} return.name - 用户名
* @returns {number} return.age - 年龄
*/
function getUser() {
return { name: 'John', age: 25 };
}
// 返回 Promise
/**
* @returns {Promise<User>} 用户 Promise
*/
async function fetchUser() {
// ...
}
// 无返回值
/**
* @returns {void}
*/
function log(message) {
console.log(message);
}
@throws 异常标签 #
描述可能抛出的异常:
javascript
/**
* @throws {类型} 描述
*/
// 单个异常
/**
* @throws {Error} 当除数为零时抛出
*/
function divide(a, b) {
if (b === 0) {
throw new Error('Division by zero');
}
return a / b;
}
// 多个异常
/**
* @throws {TypeError} 当参数类型错误时抛出
* @throws {RangeError} 当参数超出范围时抛出
*/
function setAge(age) {
if (typeof age !== 'number') {
throw new TypeError('Age must be a number');
}
if (age < 0 || age > 150) {
throw new RangeError('Age must be between 0 and 150');
}
}
@example 示例标签 #
添加使用示例:
javascript
/**
* 计算两数之和
* @param {number} a - 第一个数字
* @param {number} b - 第二个数字
* @returns {number} 两数之和
* @example
* // 基本用法
* add(1, 2) // 返回 3
*
* @example
* // 使用变量
* const x = 10
* const y = 20
* add(x, y) // 返回 30
*/
function add(a, b) {
return a + b;
}
// 多个示例
/**
* 格式化字符串
* @param {string} template - 模板字符串
* @param {Object} data - 数据对象
* @returns {string} 格式化后的字符串
* @example
* // 简单替换
* format('Hello, {name}!', { name: 'John' })
* // 返回 'Hello, John!'
*
* @example
* // 多个占位符
* format('{greeting}, {name}!', { greeting: 'Hi', name: 'Jane' })
* // 返回 'Hi, Jane!'
*/
function format(template, data) {
// ...
}
@deprecated 废弃标签 #
标记已废弃的代码:
javascript
/**
* @deprecated 该方法已废弃,请使用 newMethod
* @see newMethod
*/
function oldMethod() {
// ...
}
/**
* @deprecated 自版本 2.0 起废弃
* @see {@link newMethod}
*/
function anotherOldMethod() {
// ...
}
@see 参考标签 #
添加参考链接:
javascript
/**
* @see 相关文档或代码
*/
/**
* 发送 HTTP 请求
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API|Fetch API}
* @see request
*/
function fetch(url) {
// ...
}
/**
* 用户类
* @see User
* @see Admin
*/
class BaseUser {
// ...
}
@link 链接标签 #
创建链接:
javascript
/**
* 用户类
* @class
* @see {@link User} 用户类
* @see {@link User#getName} 获取名称方法
* @see {@link module:utils/format} 格式化工具
*/
class User {
// ...
}
变量和常量 #
@type 类型标签 #
描述变量类型:
javascript
/**
* @type {string}
*/
let name = 'John';
/**
* @type {number}
*/
const age = 25;
/**
* @type {string[]}
*/
const tags = ['js', 'node', 'react'];
/**
* @type {Object<string, number>}
*/
const scores = { math: 90, english: 85 };
/**
* @type {User | null}
*/
let currentUser = null;
@const 常量标签 #
标记常量:
javascript
/**
* API 基础地址
* @const {string}
*/
const API_BASE_URL = 'https://api.example.com';
/**
* 配置对象
* @const {Object}
*/
const CONFIG = {
timeout: 5000,
retries: 3
};
@readonly 只读标签 #
标记只读属性:
javascript
/**
* 用户 ID
* @type {string}
* @readonly
*/
this.id = generateId();
函数和方法 #
普通函数 #
javascript
/**
* 计算数组元素的总和
* @param {number[]} numbers - 数字数组
* @returns {number} 总和
*/
function sum(numbers) {
return numbers.reduce((acc, num) => acc + num, 0);
}
箭头函数 #
javascript
/**
* 双倍数值
* @param {number} value - 输入值
* @returns {number} 双倍后的值
*/
const double = (value) => value * 2;
方法 #
javascript
class Calculator {
/**
* 加法运算
* @param {number} a - 第一个数字
* @param {number} b - 第二个数字
* @returns {number} 两数之和
*/
add(a, b) {
return a + b;
}
/**
* 减法运算
* @instance
* @memberof Calculator
* @param {number} a - 被减数
* @param {number} b - 减数
* @returns {number} 差
*/
subtract(a, b) {
return a - b;
}
}
静态方法 #
javascript
class User {
/**
* 创建用户实例
* @static
* @param {Object} data - 用户数据
* @returns {User} 用户实例
*/
static create(data) {
return new User(data);
}
}
类和对象 #
类定义 #
javascript
/**
* 用户类
* @class
* @classdesc 表示系统中的用户
*
* @example
* const user = new User('John', 'john@example.com');
* user.getName(); // 'John'
*/
class User {
/**
* 创建用户实例
* @param {string} name - 用户名
* @param {string} email - 邮箱地址
*/
constructor(name, email) {
/**
* 用户名
* @type {string}
*/
this.name = name;
/**
* 邮箱地址
* @type {string}
*/
this.email = email;
}
/**
* 获取用户名
* @returns {string} 用户名
*/
getName() {
return this.name;
}
}
类属性 #
javascript
class Config {
/**
* 默认超时时间
* @type {number}
* @static
*/
static DEFAULT_TIMEOUT = 5000;
/**
* 配置名称
* @type {string}
*/
name = 'default';
}
继承 #
javascript
/**
* 管理员用户
* @class
* @extends User
*/
class Admin extends User {
/**
* 创建管理员实例
* @param {string} name - 用户名
* @param {string} email - 邮箱地址
* @param {string[]} permissions - 权限列表
*/
constructor(name, email, permissions) {
super(name, email);
/**
* 权限列表
* @type {string[]}
*/
this.permissions = permissions;
}
}
模块 #
@module 模块标签 #
定义模块文档:
javascript
/**
* HTTP 请求工具模块
* @module utils/http
*/
/**
* 发送 GET 请求
* @param {string} url - 请求地址
* @returns {Promise<Response>} 响应 Promise
*/
export function get(url) {
return fetch(url);
}
/**
* 发送 POST 请求
* @param {string} url - 请求地址
* @param {Object} data - 请求数据
* @returns {Promise<Response>} 响应 Promise
*/
export function post(url, data) {
return fetch(url, {
method: 'POST',
body: JSON.stringify(data)
});
}
导出成员 #
javascript
/**
* @module UserService
*/
/**
* 获取用户列表
* @function
* @returns {Promise<User[]>} 用户列表 Promise
*/
export const getUsers = async () => {
// ...
};
/**
* 用户类
* @class
*/
export class User {
// ...
}
导入类型 #
javascript
/**
* @module api
*/
/**
* @typedef {import('./types').User} User
* @typedef {import('./types').ApiResponse} ApiResponse
*/
/**
* 获取用户信息
* @param {number} id - 用户 ID
* @returns {Promise<ApiResponse<User>>}
*/
export async function getUser(id) {
// ...
}
注释最佳实践 #
描述要清晰 #
javascript
// ✅ 好的描述
/**
* 格式化日期为指定格式的字符串
* @param {Date} date - 要格式化的日期对象
* @param {string} format - 格式字符串,如 'YYYY-MM-DD'
* @returns {string} 格式化后的日期字符串
*/
function formatDate(date, format) {
// ...
}
// ❌ 不好的描述
/**
* 格式化日期
*/
function formatDate(date, format) {
// ...
}
保持同步 #
javascript
// ✅ 注释与代码同步
/**
* 创建用户
* @param {string} name - 用户名
* @param {string} email - 邮箱地址
* @param {number} [age] - 年龄(可选)
* @returns {User} 用户实例
*/
function createUser(name, email, age) {
// ...
}
// ❌ 注释与代码不同步
/**
* 创建用户
* @param {string} name - 用户名
* @param {string} email - 邮箱地址
*/
function createUser(name, email, age, phone) {
// ...
}
使用正确的类型 #
javascript
// ✅ 正确的类型
/**
* @param {string[]} names - 名称数组
* @returns {Object<string, number>} 键值对对象
*/
// ❌ 模糊的类型
/**
* @param {Array} names - 数组
* @returns {Object} 对象
*/
添加有意义的示例 #
javascript
// ✅ 有意义的示例
/**
* 计算折扣价格
* @param {number} price - 原价
* @param {number} discount - 折扣率(0-1)
* @returns {number} 折扣后价格
* @example
* // 计算 100 元打 8 折
* calculateDiscount(100, 0.8) // 返回 80
*
* @example
* // 计算 50 元打 9 折
* calculateDiscount(50, 0.9) // 返回 45
*/
function calculateDiscount(price, discount) {
return price * discount;
}
// ❌ 无意义的示例
/**
* @example
* calculateDiscount(100, 0.8)
*/
下一步 #
现在你已经掌握了 JSDoc 基础语法,接下来学习 类型定义 了解更多类型表达方式!
最后更新:2026-03-29