優雅的使用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），將沒有空格。
複製代碼