本文介绍 JavaScript 中四种常用的数据输出方式：window.alert 弹出警告框、document.write 写入 HTML 文档、innerHTML 操作 HTML 元素内容以及 console.log 在浏览器控制台打印信息。通过具体代码示例演示各方法的使用场景及注意事项，如 document.write 在页面加载后执行会覆盖原有内容。
前言
与 Java 等语言不同，JavaScript 并没有内置专门的打印或输出函数。在实际开发中，通常采用以下四种方式来呈现数据。
- 利用
window.alert()方法可以弹出一个警告对话框。 - 通过
document.write()可以将指定内容直接写入到当前的 HTML 文档流中。 - 借助
innerHTML属性可以向指定的 HTML 元素内部写入或修改内容。 - 使用
console.log()可以将信息输出到浏览器的开发者工具控制台中。
接下来将分别通过具体实例来演示这几种方式的具体用法。
window.alert()
首先创建一个 HTML 文件，并在其中编写如下代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>window.alert()</title>
</head>
<body>
<p>弹窗显示</p>
<script type="text/javascript">
window.alert("这是一条弹窗测试！");
</script>
</body>
</html>随后使用浏览器打开该文件，页面加载时会立即弹出一个提示框。用户点击确定后，弹窗关闭，网页主体部分会显示预设的文本内容。
document.write()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>document.write()</title>
</head>
<body>
<p>写入 HTML 文档</p>
<script type="text/javascript">
document.write(Date());
</script>
</body>
</html>新建一个 HTML 文件并填入相关代码后，用浏览器打开，页面会直接显示如下内容。从结果可以看出，利用 document.write() 成功写入了当前时间。但需要特别注意，如果 document.write() 语句在页面内容加载完成之前执行，它可以与原有内容共存并显示。然而，如果在页面内容已经完全加载之后才执行 document.write()，那么之前页面上已加载的所有内容都将被新写入的内容完全覆盖。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>document.write()</title>
</head>
<body>
<p>写入 HTML 文档</p>
<button onclick="showDate()">展示时间</button>
<script type="text/javascript">
function showDate() {
document.write(Date());
}
</script>
</body>
</html>下图展示了在页面加载完成后执行 document.write() 前后的对比情况，这说明了若在页面加载完毕后调用 document.write()，将会导致原有页面内容被覆盖。
前后对比
innerHTML
当 JavaScript 需要访问特定的 HTML 元素时，可以使用 document.getElementById(id) 方法获取该元素引用，进而利用 innerHTML 属性来读取或插入该元素内部的 HTML 内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>innerHTML</title>
</head>
<body>
<p id="inner">操纵 HTML 元素</p>
<button onclick="changeContext()">点击修改上述内容</button>
<script type="text/javascript">
function changeContext() {
document.getElementById("inner").innerHTML = "修改后的内容";
}
</script>
</body>
</html>
修改前与修改后的效果对比
console.log()
要使用 console.log() 方法，浏览器需支持调试功能，通常推荐使用 Chrome 浏览器。按下 F12 快捷键即可打开开发者调试模式，在调试窗口界面中切换到 Console 标签页。由于本例使用的是 Edge 浏览器，因此显示的是控制台界面。用户可根据个人习惯选择浏览器，但业界更普遍推荐 Chrome。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>console.log</title>
</head>
<body>
<p>浏览器调试模式查看</p>
<script type="text/javascript">
var num1 = 11;
var num2 = 10;
console.log(num1 + num2);
</script>
</body>
</html>
总结
以上便是关于 JavaScript 中数据输出的主要内容。尽管 JavaScript 不像 Java 那样拥有类似 System.out.println() 这样的标准打印输出方法，但掌握上述四种方式，已足以应对日常开发中的大部分输出需求。
至此，关于 JavaScript 中多种数据输出方式的介绍已完毕。如需了解更多 JavaScript 输出相关内容，欢迎查阅本站往期文章或继续浏览后续系列教程，感谢大家的支持！