JS基础：输出信息的5种方式详解

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃-大专生，一枚程序媛，感谢关注。回复 "前端基础题"，可免费获得前端基础 100 题汇总，回复 "前端基础路线"，可获取完整web基础路线导图。

300篇原创内容-更多前端系列内容可以go公众.h：云桃桃

后台回复"前端基础路线"可获取前端基础学习路线

后台回复"前端基础题"可得到前端基础100题汇总，持续更新中

后台回复"前端电子书"可获取20+本精选电子书

前言

在 JavaScript 中，有多种输出方案可以将我们想要的信息展示给用户。就像我们有不同的方式来表达自己的想法一样。

下面让我们来详细了解一下5种常见的输出方案，以及它们的适用场景吧。

5 种输出方式

一、 console.log()

这是最常用的输出方法之一，它将信息输出到浏览器的控制台。适用于在开发过程中调试代码、查看变量的值或打印一些临时的消息。比如。

复制代码

console.log('Hello, 桃!')

那这个信息，我们如何查看呢？

首先，英文不好的，可以在浏览器预览时候，按 F12，按如下 2 张图的顺序，把开发者工具，设置成中文。

然后，我们可以按照以下步骤进行查看输出：

打开浏览器开发者工具。不同的浏览器可能有不同的打开方式，一般可以通过按 F12 键或右键点击页面选择"检查"来打开。
在开发者工具中，找到"控制台"选项卡。这个选项卡通常标有"Console"或类似的名称。
在控制台中，你将看到所有通过 console.log 输出的信息。它们按照输出的顺序排列。如图。

使用时要注意以下几点：

主要用于开发调试，输出的信息不会在页面上显示，而是在浏览器的控制台中。
可以输出各种类型的数据，包括字符串、数字、对象等。
在生产环境中，尽量减少使用 console.log()，以免影响性能。

二、 alert()

弹出一个包含信息的对话框。适用于向用户展示一些重要的提示或警告消息，需要用户立即注意并进行操作。

复制代码

<button id="button">点击我</button>
<script>
  button.addEventListener('click', function () {
    alert('你点击了按钮！')
  })
</script>

点击按钮后，效果如下图：

使用时要注意以下几点：

会弹出一个模态对话框，打断用户当前的操作。
通常用于向用户展示重要的提示或警告信息。
由于它会打断用户体验，所以只是在新手期或者做项目时排查疑难问题阶段需要使用，在正常项目下通常都会以更好体验的，更符合项目的UI形式出现。

三、 prompt()

弹出一个输入框，要求用户输入信息。适用于获取用户的输入，例如在表单中获取用户的姓名或密码。

如下代码，点击按钮，就会弹出输入框。

复制代码

<button id="button2">点击我，弹出输入框</button>
<script>
  button2.addEventListener('click', function () {
    var name = prompt('请输入你的名字：')
    console.log('你输入的名字是：' + name)
  })
</script>

效果如图：

使用时要注意以下几点：

弹出一个输入框，要求用户输入文本。
用于获取用户的输入，但在移动设备上可能不太方便。
要处理用户可能取消输入或输入无效数据的情况。
这个方法通常在新手期被使用，但在实际开发中很少被用到。

四、document.write()

将信息直接写入文档的内容中。

复制代码

document.write('欢迎来到我们的网站！')

使用时要注意以下几点：

直接将内容写入文档流，会覆盖页面上已有的内容。
应该在页面加载完成后使用，否则可能会导致页面布局混乱。
由于它会动态修改页面内容，可能会影响页面的效果和性能，通常只在新手阶段使用它。

五、innerHTML 属性

通过修改元素的 innerHTML 属性来更改元素的内容。适用于动态更新页面的部分内容。比如：

复制代码

<h1 id="h1"></h1>
<script>
 document.getElementById('h1').innerHTML = '我是通过js写入的标题呀！'
</script>

效果如下：

OK，你学会了么？本文完。