JavaScript 输出
本文我们将讲解JavaScript常用的输出方法，包括在控制台输出（使用console.log）、在网页中输出（使用document.write和innerHTML），以及通过弹窗输出（使用alert）。
一、在控制台输出
1、使用 console.log
console.log 是最常用的输出方法之一，它可以在浏览器的开发者控制台中显示信息。
console.log("Hello, World!");
在浏览器中按 F12 或右键选择“检查”打开开发者工具，然后切换到“控制台”选项卡，你将看到输出的信息。
2、输出多种类型的数据
console.log 可以输出字符串、数字、数组、对象等多种类型的数据。
console.log("Number: ", 42);
console.log("Array: ", [1, 2, 3, 4]);
console.log("Object: ", {name: "Alice", age: 25});
3、格式化输出
使用模板字符串（反引号 `）和占位符（${}）可以更方便地格式化输出。
const name = "Bob";
const age = 30;
console.log(`Name: ${name}, Age: ${age}`);
二、在网页中输出
1、使用 document.write
document.write 可以直接在 HTML 文档中写入内容。但需要注意的是，这种方法会覆盖整个文档，如果在文档加载后使用，会导致页面内容被清除。
<!DOCTYPE html>
<html>
<head>
<title>Document Write Example</title>
</head>
<body>
<script>
document.write("Hello, World!");
</script>
</body>
</html>
2、使用 innerHTML
innerHTML 是更常用的一种方法，它允许你修改某个 HTML 元素的内容。
<!DOCTYPE html>
<html>
<head>
<title>InnerHTML Example</title>
</head>
<body>
<div id="output"></div>
<script>
document.getElementById("output").innerHTML = "Hello, World!";
</script>
</body>
</html>
3、使用 textContent
与 innerHTML 类似，但 textContent 不会解析 HTML 标签，只会显示纯文本。
<!DOCTYPE html>
<html>
<head>
<title>TextContent Example</title>
</head>
<body>
<div id="output"></div>
<script>
document.getElementById("output").textContent = "Hello, World!";
</script>
</body>
</html>
三、通过弹窗输出
1、使用 alert
alert 方法会弹出一个对话框，显示指定的信息。虽然这种方法在调试时很常用，但在生产环境中应谨慎使用，以免影响用户体验。
alert("Hello, World!");
2、使用 prompt 和 confirm
prompt 可以显示一个带有输入框的对话框，允许用户输入信息。confirm 则显示一个带有“确定”和“取消”按钮的对话框。
const userInput = prompt("Please enter your name:");
console.log(userInput);
const userConfirmed = confirm("Are you sure?");
console.log(userConfirmed); // true or false
总结
在 JavaScript 中，有多种方法可以在不同的场景下输出信息。console.log 是调试和日志记录的首选方法，document.write 和 innerHTML 则用于在网页中显示内容，而 alert、prompt 和 confirm 则用于与用户进行简单的交互。根据具体需求选择合适的方法，可以帮助你更有效地进行开发和调试。
本文地址：https://www.tides.cn/p_js-output