console.log()方法是向 Web 控制台输出一条消息。使用方法也非常简单。
console.log('hello world');
// logs "hello world"
let num = 12;
console.log(num)
//logs 12
本文将提供5个小技巧帮助你高效的使用console.log()
命名输出的变量
调试的过程中经常碰到：输出多个变量，在浏览器打开控制台后，一阵凌乱不知道哪个变量对应的哪个值。如下：
function calculate(a, b) {
let and = a + b;
let subtract = a - b;
console.log(and);
console.log(subtract);
}
calculate(1, 2);
calculate(6, 1);
执行代码后，控制台便输出一系列数字。
虽然可以看到输出结果的对应代码行数，但是还得对照着看，很麻烦。那么如何将变量名一起输出呢？？
将变量放入一对花括号内即可。例如console.log({and});
function calculate(a, b) {
let and = a + b;
let subtract = a - b;
console.log({and});
console.log({subtract});
}
calculate(1, 2);
calculate(6, 1);
如下图：变量名对应输出的值，非常清楚。
高级格式化
有时候你需要输出一条包含多种数据类型的信息。console.log()提供了字符串格式化命令sprintf()可以用%s , %i等修饰符。
const user = 'April';
const counts = 100;
console.log('%s failed to do that %i times', user, counts);
// logs 'April failed to do that 100 times'
%s , %i 分别被替换为变量user , counts 的值。%s将转换为字符串，而%i转换为数字。
以下是修饰符列表：
| 修饰符 | 作用 |
|---|---|
| %s | 元素转换为字符串 |
| %d 或 %i | 元素转换为整数 |
| %f | 元素转换为浮点数 |
| %o | 元素以最佳有用的格式显示 |
| %O | 元素以通用JavaScript对象格式显示 |
| %c | 给元素添加css样式 |
添加样式
浏览器的控制台允许对输出的信息添加样式。我们可以用%c 修饰符来添加样式。如下：
let msg = 'hello world'
console.log(`%c ${msg}`, 'font-size: 36px; font-weight: bold; color : green');
结果如图：
对象Stringify（）
用JSON.stringify() 方便查看完整的对象结构。
let staff = [
{name: "April", job: "programmer", age: "18", hobby: "study"},
{name: "Shawn", job: "student", age: "8", hobby: "study"},
{name: "Leo", job: "teacher", age: "28", hobby: "play"},
{name: "Todd", job: "programmer", age: "19", hobby: "sleep"},
{name: "Scoot", job: "cook", age: "38", hobby: "study"},
]
console.log(JSON.stringify(staff, null, 2))
结果如下：
JSON.stringify() 方法将一个 JavaScript 值（对象或者数组）转换为一个 JSON 字符串。
JSON.stringify(value[, replacer [, space]])
// value 将要序列化成 一个 JSON 字符串的值。
// replacer 如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化；
//space 指定缩进用的空白字符串，用于美化输出；如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格；如果该参数为字符串（当字符串长度超过10个字母，取其前10个字母），该字符串将被作为空格；如果该参数没有提供（或者为 null），将没有空格。
网友评论