如何在 JavaScript 控制台打印

17 Mar 2025 | 6 分钟阅读

在本文中,我们将学习如何在 JavaScript 控制台中进行打印。

打印意味着在屏幕上显示输出或获得结果。有几种不同的方法可以将输出打印到控制台,它们如下:

  • 使用 console.log()
  • 使用 console.info()
  • 使用 console.warn()
  • 使用 console.debug()
  • 使用 console.error()
  • 使用 console.assert()
  • 使用 console.count()
  • 使用 console.group() 和 console.groupEnd()
  • 使用 console.table()
  • 使用 window.alert()
  • 使用 document.write()
  • 使用 innerHTML
  • 使用 textcontent
  • 使用 window.print()

我们将通过演示逐一彻底理解每种方法。

使用 console.log()

console.log() 是一个内置函数,用于将结果打印到控制台。

演示-1

我们将使用 console.log() 方法打印输出。

代码

输出

我们可以在控制台中看到输出。

How to Print in JavaScript Console

演示-2

我们将使用 console.log() 方法打印单个值。

代码

输出

在下面的输出中,我们可以看到 x 的值为 5。

How to Print in JavaScript Console

演示-3

我们将使用 console.log() 方法输出多个值。

代码

输出

这是我们在控制台中可以看到多个值的输出。

How to Print in JavaScript Console

使用 console.info()

console.info() 是一个静态方法,用于将信息性消息打印到控制台。

演示

我们将使用 console.info() 方法打印输出。

代码

输出

我们可以看到信息性消息已打印到控制台。

How to Print in JavaScript Console

使用 console.warn()

console.warn() 是一个静态方法,用于将警告消息输出到控制台。

演示

我们将使用 console.warn() 方法输出警告消息。

代码

输出

我们可以看到警告消息已打印到控制台。

How to Print in JavaScript Console

使用 console.debug()

console.debug() 是一个静态方法,用于将调试消息打印到控制台。

演示

我们将使用 console.debug() 方法输出调试消息。

代码

输出

我们可以看到调试消息已打印到控制台。

How to Print in JavaScript Console

使用 console.error()

console.error() 是一个静态方法,用于将错误消息输出到控制台。

演示

我们将使用 console.error() 方法打印输出。

代码

输出

我们可以看到错误消息已打印到控制台。

How to Print in JavaScript Console

使用 console.assert()

console.assert() 方法用于在语句为 false 时将消息输出到控制台。如果语句为 true,则不会向控制台打印任何内容。

演示

我们将使用 console.assert() 方法输出消息。

代码

输出

我们可以看到语句为 false,因此它将消息打印到控制台。

How to Print in JavaScript Console

使用 console.count()

console.count() 方法用于将计数打印到控制台。

演示

我们将使用 console.count() 方法输出计数。

代码

输出

我们可以看到 console.count() 方法将计数打印到控制台。

How to Print in JavaScript Console

使用 console.group() 和 console.groupEnd()

console.group() 方法用于在控制台中开始一个消息组,而 console.groupEnd() 方法用于结束消息组。

演示

我们将使用 console.group() 方法和 console.groupEnd() 方法在控制台中开始和结束组消息。

代码

输出

我们可以在控制台中看到组消息。

How to Print in JavaScript Console

使用 console.table()

console.table() 方法用于将表格打印到控制台。

演示

我们将使用 console.table() 方法输出表格。

代码

输出

在下面的输出中,我们可以看到表格显示在控制台中。

How to Print in JavaScript Console

使用 window.alert()

window.alert() 方法用于输出弹出式警报消息。

演示

我们将使用 window.alert() 方法输出弹出式警报消息。

代码

输出

我们可以看到输出以弹出窗口的形式出现。

How to Print in JavaScript Console

使用 document.write()

document.write() 方法用于将输出打印到控制台。

演示

我们将使用 document.write() 方法在文档中写入内容。

代码

输出

我们可以看到输出打印到控制台,内容为“你是一个美丽的女孩。”

How to Print in JavaScript Console

使用 innerHTML

innerHTML 是一个属性,用于访问和修改 HTML 内容。

演示-1

在接下来的演示中,我们将使用 innerHTML 打印输出。

代码

输出

我们可以看到使用 innerHTML 将输出打印到了控制台。

How to Print in JavaScript Console

演示-2

在接下来的演示中,我们将使用 innerHTML 将两个数字的加法打印到控制台。

代码

输出

我们可以看到 15 和 45 的加法结果通过 innerHTML 打印到了控制台。

How to Print in JavaScript Console

使用 textcontent

textContent 是一个属性,用于设置和获取网页上的内容。

演示-1

在接下来的演示中,我们将使用 textContent 打印输出。

代码

输出

我们可以看到使用 textContent 将输出打印到了控制台。

How to Print in JavaScript Console

演示-2

在接下来的演示中,我们将使用 textContent 将两个数字的乘法打印到控制台。

代码

输出

我们可以看到 50 和 9 的乘法结果通过 textContent 打印到了控制台。

How to Print in JavaScript Console

使用 window.print()

window.print() 是一个方法,用于打印当前网页上的内容。

演示

我们将使用 window.print() 打印输出。

代码

输出

在下面的输出中,我们可以看到一些文本和一个按钮。

How to Print in JavaScript Console

点击按钮后,将打开打印屏幕(如下所示),我们可以在其中选择保存当前页面或通过打印机打印当前页面。

How to Print in JavaScript Console

结论

在本文中,我们学习了如何在 JavaScript 控制台中进行打印。我们可以使用各种方法在 JavaScript 控制台中进行打印,包括 console.log()、console.info()、console.warn()、console.debug()、console.error()、console.assert()、console.count()、console.table()、window.alert()、document.write()、innerHTML、textContent、window.print()、console.group() 和 console.groupEnd()。