优雅的使用console.log() 须要了解的一些技巧。

console.log()方法是向 Web 控制台输出一条消息。使用方法也很是简单。

console.log('hello world');
// logs "hello world"

let num = 12;
console.log(num)
//logs 12
复制代码

本文将提供几个小技巧帮助你高效的使用console.log()

1、命名输出的变量

调试的过程当中常常碰到：输出多个变量，在浏览器打开控制台后，一阵凌乱不知道哪一个变量对应的哪一个值。以下：

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);
复制代码

以下图：变量名对应输出的值，很是清楚。

2、高级格式化

有时候你须要输出一条包含多种数据类型的信息。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样式

3、添加样式

浏览器的控制台容许对输出的信息添加样式。咱们能够用%c 修饰符来添加样式。以下：

let msg = 'hello world'
console.log(`%c ${msg}`, 'font-size: 36px; font-weight: bold; color : green');
复制代码

结果如图：

4、对象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），将没有空格。
复制代码