使用 console.log()
在浏览器中显示 JavaScript 值
console.log()
是 JavaScript 开发者最常用的方法之一,用于在浏览器的控制台输出信息,帮助进行调试和日志记录。以下是对 console.log()
方法的详细讲解和代码示例。
功能和用途
- 调试: 输出变量值、程序状态或错误信息,以便开发者理解代码执行情况。
- 日志记录: 在开发过程中记录关键信息,帮助追踪用户行为或系统状态。
- 格式化输出: 使用不同的格式化方法来美化或增强输出信息的可读性。
基本使用
console.log()
方法可以接受一个或多个参数,输出到浏览器的控制台。
console.log('Hello, World!');
console.log(123);
console.log(true);
格式化字符串
console.log()
可以使用占位符来格式化字符串,类似于 printf
函数。
var name = 'Kimi';
var age = 1;
console.log('My name is %s and I am %d years old.', name, age);
多参数输出
console.log()
可以同时输出多个参数,它们将被添加到同一行,用空格分隔。
var a = 1, b = 2, c = 3;
console.log(a, b, c);
多行输出
要输出多行,可以在字符串中使用 \n
换行符。
console.log('First line.\nSecond line.');
样式输出
console.log()
还可以接受 CSS 样式作为第二个参数,来改变输出文本的样式。
console.log('%cThis is important!', 'color: red; font-weight: bold;');
代码示例
以下是一个简单的 HTML 页面,包含一些 JavaScript 代码,使用 console.log()
输出不同的数据类型和格式化字符串。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Console Log Example</title>
</head>
<body>
<script>
// 输出基本数据类型
console.log('String:', 'Hello, World!');
console.log('Number:', 123);
console.log('Boolean:', true);
// 格式化字符串
var name = 'Kimi';
var age = 1;
console.log('My name is %s and I am %d years old.', name, age);
// 多参数输出
var a = 1, b = 2, c = 3;
console.log('Multiple parameters:', a, b, c);
// 多行输出
console.log('First line.\nSecond line.');
// 样式输出
console.log('%cThis is important!', 'color: red; font-weight: bold;');
</script>
</body>
</html>