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

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

来源：oschina

链接：https://my.oschina.net/u/4368960/blog/3225311

标签

javascript

HOBBY