菜鸟科技网

js打印命令有哪些?如何使用?

最核心的打印命令:console.log()

这是最基本、最常用的命令,用于在浏览器的开发者工具控制台中输出信息。

js打印命令有哪些?如何使用?-图1
(图片来源网络,侵删)

语法:

console.log(message);
console.log(message1, message2, /* ... , */ messageN);

示例:

// 打印字符串
console.log("Hello, World!");
// 打印数字
console.log(2025);
// 打印变量
let name = "Alice";
let age = 30;
console.log(name); // 输出: Alice
console.log(age);  // 输出: 30
// 打印多个变量
console.log("Name:", name, "Age:", age); // 输出: Name: Alice Age: 30
// 打印一个复杂的表达式
console.log("Next year, " + name + " will be " + (age + 1) + " years old.");
// 输出: Next year, Alice will be 31 years old.

如何打开开发者工具?

  • Chrome / Edge / Firefox: 按 F12 键,或者右键点击页面选择“检查”(Inspect),然后切换到 "Console" (控制台) 标签页。

其他常用的 console 方法

除了 logconsole 对象还提供了其他非常有用的方法,可以帮助你更好地调试。

js打印命令有哪些?如何使用?-图2
(图片来源网络,侵删)

console.warn()

打印警告信息,输出通常是黄色的,可以用来提醒开发者注意某些潜在问题,但不会阻止程序运行。

let config = { theme: 'dark' };
if (config.theme === 'dark') {
    console.warn("警告:深色主题可能在某些旧版浏览器上不支持。");
}

console.error()

打印错误信息,输出通常是红色的,并且会带上一个错误堆栈跟踪,这对于定位 Bug 至关重要。

function divide(a, b) {
    if (b === 0) {
        console.error("错误:除数不能为零!");
        return;
    }
    return a / b;
}
divide(10, 0);
// 控制台会显示红色的错误信息和调用堆栈

console.info() / console.debug()

  • console.info(): 打印一般性信息,通常显示为带一个 "i" 图标的蓝色信息,有时在 "Verbose" (详细) 级别的日志中才能看到。
  • console.debug(): 打印调试信息,默认情况下可能不会显示,需要你在开发者工具中设置日志级别为 "Verbose"。
console.info("这是一条信息。");
console.debug("这是一条调试信息,可能需要切换日志级别才能看到。");

console.table()

如果数据是数组或对象,使用 console.table() 会以表格形式展示,非常直观!

let users = [
    { id: 1, name: '张三', email: 'zhangsan@example.com' },
    { id: 2, name: '李四', email: 'lisi@example.com' },
    { id: 3, name: '王五', email: 'wangwu@example.com' }
];
console.table(users);
// 会输出一个漂亮的表格,包含 id, name, email 三列

console.group()console.groupEnd()

可以将相关的日志信息分组折叠,当输出很多日志时,这能极大提高可读性。

console.group("用户信息");
console.log("用户名: Alice");
console.log("用户ID: 12345");
console.log("状态: 活跃");
console.groupEnd();
console.group("系统信息");
console.log("操作系统: Windows 11");
console.log("浏览器: Chrome");
console.groupEnd();

在控制台中,"用户信息"和"系统信息"会形成一个可以折叠/展开的树形结构。


格式化输出 (字符串插值)

现代 JavaScript (ES6+) 推荐使用 模板字符串 (Template Literals) 来格式化输出,它比传统的字符串拼接更简洁、更易读。

语法:

`字符串文本 ${JavaScript表达式} 字符串文本`

示例:

let user = 'Bob';
let points = 1000;
let loggedIn = true;
// 使用模板字符串
console.log(`欢迎, ${user}! 你当前有 ${points} 积分,`);
// 输出: 欢迎, Bob! 你当前有 1000 积分。
// 结合条件判断
console.log(`用户登录状态: ${loggedIn ? '已登录' : '未登录'}`);
// 输出: 用户登录状态: 已登录

真正的“打印”功能:window.print()

如果你想要的功能是触发浏览器的打印对话框,让用户选择将当前网页或部分内容打印到物理打印机,那么你应该使用 window.print()

注意: 这不是 console 的一部分,它会调用浏览器自带的打印功能。

示例:

// 在页面上放一个按钮
// <button onclick="window.print()">打印此页面</button>
// 在 JS 中调用
function printPage() {
    window.print();
}

当调用 window.print() 时,浏览器会显示打印预览窗口,用户可以设置打印机、纸张方向等,然后执行打印。


命令 用途 示例
console.log() 最常用,打印普通信息,用于调试。 console.log("Hello");
console.warn() 打印警告信息,通常是黄色。 console.warn("This is a warning.");
console.error() 打印错误信息,通常是红色,带堆栈。 console.error("Something went wrong.");
console.table() 以表格形式打印数组或对象。 console.table(myObject);
console.group() 将日志信息分组,可折叠。 console.group("Group 1"); ... console.groupEnd();
window.print() 触发浏览器打印对话框,用于物理打印。 window.print();

核心要点:

  • 开发调试:使用 console 系列命令。
  • 物理打印:使用 window.print() 方法。
分享:
扫描分享到社交APP
上一篇
下一篇