js log日志记录|极客笔记

js log日志记录

1. 前言

在软件开发和调试过程中，日志记录是一项非常重要的任务。通过打印出程序执行过程中的关键信息，我们可以更好地理解代码的运行情况和排查问题。JavaScript中提供了一种方便的日志记录方法——console.log()函数。本文将详细介绍JavaScript中的日志记录技巧，帮助开发者更好地利用console.log()函数。

2. console.log()函数的基本用法

console.log()函数是JavaScript中最常用的日志记录函数之一。它可以将信息打印到浏览器的控制台或者开发者工具的控制台中。

2.1 打印字符串

console.log()函数可以接受一个或多个参数，并将它们打印出来。最简单的用法是打印一个字符串：

console.log("Hello, World!");

运行结果：

Hello, World!

2.2 打印变量

除了字符串，console.log()函数还可以打印其他类型的变量，如数字、布尔值、对象等。例如，打印一个数字：

let number = 42;
console.log(number);

运行结果：

2.3 打印对象

如果要打印一个对象，console.log()函数会将其转换为字符串并打印出来。例如，打印一个包含姓名和年龄的对象：

let person = {name: "Alice", age: 20};
console.log(person);

运行结果：

{name: "Alice", age: 20}

2.4 多个参数同时打印

console.log()函数可以同时接受多个参数，并将它们按照顺序打印出来。例如，打印多个字符串：

console.log("Hello", "World!");

运行结果：

Hello World!

3. 格式化日志输出

除了基本的打印功能，console.log()函数还支持格式化输出，使日志更易读。

3.1 字符串插值

可以使用字符串插值的方式在日志中引用变量的值。例如：

let name = "Alice";
let age = 20;
console.log(`姓名： ${name}，年龄：$ {age}`);

运行结果：

姓名：Alice，年龄：20

3.2 格式化对象输出

可以使用 %O 或 %o 标记来格式化对象输出。例如：

let person = {name: "Alice", age: 20};
console.log("Person: %O", person);

运行结果：

Person: {name: "Alice", age: 20}

3.3 自定义格式化

如果需要更复杂的格式化，可以自定义输出格式的规则。例如：

let person = {name: "Alice", age: 20};
console.log(JSON.stringify(person, null, 4));

运行结果：

{
    "name": "Alice",
    "age": 20
}

4. 日志级别和条件输出

除了常规的日志记录方式，JavaScript中的console对象还提供了其他方法，可以根据日志级别和条件进行输出控制。

4.1 日志级别

console对象提供了多个日志级别的方法，包括log、info、warn和error。这些方法具有不同的显示效果和语义。

log方法：常规信息的输出，使用最频繁；
info方法：额外的信息输出；
warn方法：警告信息的输出；
error方法：错误信息的输出。

console.log("这是一条常规信息");
console.info("这是一条额外信息");
console.warn("这是一条警告信息");
console.error("这是一条错误信息");

运行结果：

这是一条常规信息
这是一条额外信息
这是一条警告信息
这是一条错误信息

4.2 条件输出

console对象的方法还可以根据条件进行输出。例如，使用console.assert()方法进行条件判断：

let x = 10;
console.assert(x > 5, "x 应该大于 5");
console.assert(x < 5, "x 应该小于 5");

运行结果：

Assertion failed: x 应该小于 5

5. 高级用法

除了基本的日志记录功能之外，console对象还提供了一些高级用法，帮助开发者更好地进行调试和分析。

5.1 分组输出

console对象提供了console.group()和console.groupEnd()方法，可以将打印的日志分组显示，方便阅读和分析。

console.group("Group 1");
console.log("Hello");
console.log("World");
console.groupEnd();

console.group("Group 2");
console.log("Foo");
console.log("Bar");
console.groupEnd();

运行结果：

Group 1
Hello
World
Group 2
Foo
Bar

5.2 计时功能

console对象提供了console.time()和console.timeEnd()方法，用于计算代码执行的时间。

console.time("Timer");
for(let i = 0; i < 1000000; i++) {
    // 一些耗时操作
}
console.timeEnd("Timer");

运行结果：

Timer: 113.748046875ms

5.3 跟踪调用栈

console对象的console.trace()方法可以输出当前的调用栈信息，方便定位代码执行的位置。

function foo() {
    console.trace("Trace");
}

function bar() {
    foo();
}

bar();

运行结果：

Trace
    at foo (<anonymous>:2:15)
    at bar (<anonymous>:6:5)
    at <anonymous>:9:1

6. 结论

通过本文的介绍，我们学习了JavaScript中的日志记录技巧。console.log()函数是我们最常用的日志记录方法，可以打印各种类型的变量和对象。另外，我们还了解了格式化输出、日志级别和条件输出、分组输出、计时功能以及跟踪调用栈等高级用法。

js log日志记录