你知道Console.log 的全部用法吗?

597 阅读3分钟

console.log 是 JavaScript 中常用的调试工具,它通常用于将信息输出到浏览器的开发者控制台或终端中,以便在开发过程中查看和分析数据。除了简单的打印文本之外,console.log 还支持一些高级用法,以帮助你更有效地调试和分析代码。

打印变量的值:

 const x = 10;
 console.log("The value of x is: ", x);

格式化输出:

console.log() 支持使用格式说明符来格式化输出。格式说明符是用于指定输出格式的字符。

以下是一些常用的格式说明符:

  • %s:字符串
  • %d:整数
  • %f:浮点数
  • %o:对象
  • %O:对象
  • %c:CSS 样式

例如,以下代码将使用格式说明符来打印一个日期和时间:

例如,以下代码将使用格式说明符来打印一个日期和时间:

 const now = new Date();
 console.log("%d-%m-%Y %H:%M:%S", now);

这将输出以下内容:

 2023-07-20 12:00:00

console.log 支持使用占位符进行字符串格式化,类似于 printf 中的格式化字符串。例如:

 const name = "John";
 const age = 30;
 console.log("Name: %s, Age: %d", name, age);

在这个示例中,%s 用于字符串,%d 用于数字,它们会被相应的变量的值替换。

打印对象:

console.log 可以用于打印 JavaScript 对象,它会以可展开的方式显示对象的属性和值。

 const person = { name: "Alice", age: 25 };
 console.log("Person object:", person);

分组输出:

console.groupconsole.groupEnd 允许你将输出信息分组,以帮助组织和清晰地显示信息:

 console.group("Group 1");
 console.log("Message 1");
 console.log("Message 2");
 console.groupEnd();
 ​
 console.group("Group 2");
 console.log("Message 3");
 console.groupEnd();

跟踪函数调用:

console.trace 可以用于跟踪函数调用的堆栈,以帮助你了解函数的调用流程:

 function foo() {
   console.trace("foo function called");
 }
 ​
 function bar() {
   foo();
 }
 ​
 bar();

条件输出:

console.assert 可以用于在特定条件下输出信息,只有当条件为假时才会输出:

 const x = 5;
 console.assert(x === 10, "x 不等于 10");

打印对象和数组

console.log() 默认会将对象和数组打印为字符串。如果要打印对象或数组的详细信息,可以使用 console.table() 函数。

console.table() 函数将对象或数组打印为表格,其中每个属性或元素都显示在一个单独的行中。

例如,以下代码将使用 console.table() 函数来打印一个对象:

 const person = {
   name: "John Doe",
   age: 30,
   address: {
     street: "Main Street",
     city: "New York",
     state: "New York",
     zip: "10001",
   },
 };
 console.table(person);

这将输出以下内容:

   name  | age  | address
 ------- | -------- | --------
 John Doe | 30 | {
   street: "Main Street",
   city: "New York",
   state: "New York",
   zip: "10001",
 }

打印调用栈

console.trace() 函数将打印出调用栈。调用栈是函数被调用的顺序。

例如,以下代码将使用 console.trace() 函数来打印调用栈:

 function foo() {
   console.trace();
   console.log("foo");
 }
 ​
 function bar() {
   foo();
   console.log("bar");
 }
 ​
 bar();

这将输出以下内容:

 (anonymous function)@/path/to/file.js:10
 foo@/path/to/file.js:5
 bar@/path/to/file.js:2

其他高级用法

console.log() 还支持其他一些高级用法,如:

  • console.assert():用于断言一个条件是否为真。如果条件为假,则会抛出异常。
  • console.clear():用于清除控制台。
  • console.group():用于将输出分组。
  • console.groupEnd():用于结束分组。
  • console.time():用于开始计时。
  • console.timeEnd():用于结束计时。
  • console.count():用于统计一个函数或代码被调用了多少次。