当前位置：首页 > news >正文

console.log 简介

news 2026/6/11 15:28:53

一、`console.log()` 基本概念

console.log() 是 JavaScript 中用于在浏览器控制台 / Node.js 终端输出信息的核心方法，相当于编程里的 “打草稿” 或 “看中间结果”，是调试代码、查看变量值、验证逻辑是否正确的最基础工具。

简单说：你想知道代码运行到某一步时某个变量是啥值、某段逻辑有没有执行，都可以用它 “打印” 出来看。

二、核心用法（附完整代码示例）

javascript
 
运行
 
 
 
 

// 1. 基础用法：输出单个值/变量
let name = "张三";
let age = 25;
console.log(name); // 输出：张三
console.log(age);  // 输出：25// 2. 输出多个值（用逗号分隔，自动用空格隔开）
console.log("姓名：", name, "年龄：", age); // 输出：姓名： 张三 年龄： 25// 3. 字符串拼接（老写法，不如模板字符串直观）
console.log("姓名：" + name + "，年龄：" + age); // 输出：姓名：张三，年龄：25// 4. 模板字符串（ES6推荐写法，更清晰）
console.log(`姓名：${name}，年龄：${age}`); // 输出：姓名：张三，年龄：25// 5. 输出对象/数组（会格式化显示，方便查看结构）
let user = { name: "李四", age: 30 };
let arr = [1, 2, 3, 4];
console.log(user); // 输出：{name: '李四', age: 30}（可展开看详情）
console.log(arr);  // 输出：[1, 2, 3, 4]// 6. 带标识的输出（方便区分不同调试信息）
console.log("【用户信息】", user); // 输出：【用户信息】 {name: '李四', age: 30}
 

三、进阶技巧（提升调试效率）

javascript
 
运行
 
 
 
 

// 1. 控制台分组（适合输出大量相关信息）
console.group("用户详情"); // 开始分组
console.log("姓名：", user.name);
console.log("年龄：", user.age);
console.groupEnd(); // 结束分组// 2. 格式化输出（%s字符串/%d数字/%o对象）
console.log("姓名：%s，年龄：%d", user.name, user.age); // 输出：姓名：李四，年龄：30
console.log("用户对象：%o", user); // 输出：用户对象：{name: '李四', age: 30}// 3. 计数输出（统计某段代码执行次数）
for (let i = 0; i < 3; i++) {console.count("循环执行次数"); // 输出：循环执行次数: 1 / 2 / 3
}
console.countReset("循环执行次数"); // 重置计数// 4. 计时功能（测试代码执行耗时）
console.time("数组遍历耗时");
let sum = 0;
for (let i = 0; i < 10000; i++) {sum += i;
}
console.timeEnd("数组遍历耗时"); // 输出：数组遍历耗时: 0.12ms（具体值看设备）
 

四、使用注意事项

运行环境：
- 浏览器中：按 F12 打开 “控制台（Console）” 标签就能看到输出；
- Node.js 中：直接在终端运行 js 文件，输出会显示在终端里。
上线前清理：正式发布的代码要删掉console.log()，避免泄露信息、影响性能；
区别于 alert：console.log()不阻塞代码执行，也不影响用户操作，比alert()更适合调试。