我們知道 console.log(message)用法很簡單，表示將引數message 列印到控制檯上。

console.log('前端小智')
// 前端小智

const myAge = 28
console.log(myAge) // 28

本文主要介紹5個有用的技巧，可幫助你在使用console.log()時提高工作效率。

1. 列印全名變數

如果在控制檯列印多個變數，是數量比較多的情況下，我們很難區別哪個變數對應哪個值。

function sum(a,b) {
console.log(b);
return a + b;
}

sum(1,2);
sum(4,5);

執行上述程式碼後，我們只會看到一系列數字

要表示值和變數之間關係，可以用花括號把變數包起來：{b}：

2.高階格式化

將某些東西列印到控制檯最常見方法是簡單地使用一個引數呼叫console.log()：

console.log('前端小智') // 前端小智

有時我們可能想要一條包含多個變數的資訊。 幸運的是，console.log()可以使用％s，％i等說明符以sprintf()的方式格式化字串。

const user = '前端小智';
const attempts = 5;

console.log('%s 登入失敗了 %i 次',user,attempts);
// 前端小智 登入失敗了 5 次

％s和％i被user和attempts的值替換。 說明符％s轉換為字串，而％i轉換為數字。

以下是可用說明符的列表：

說明符	作用
%s	元素轉換為字串
%d 或 %i	元素轉換為整數
%f	元素轉換為浮點數
%o	元素以最有效的格式顯示
%O	元素以最有效的格式顯示
%c	應用提供的css

3.具有樣式的列印風格

瀏覽器控制檯允許我們將樣式應用於列印的訊息，我們可以通過將％c說明符與相應的css樣式一起使用來實現，如下所示：

console.log('%c Big message','font-size: 36px; font-weight: bold');

說明符％c應用CSS樣式'font-size: 36px; font-weight: bold'

4. 互動展示

日誌樣式化依賴於主機的控制檯實現。像Chrome和Firefox這樣的瀏覽器提供物件和陣列的互動展示，而 Node 控制檯輸出為文字。

來看看Chrome如何列印普通物件，陣列和DOM樹，可以通過展開和摺疊與這些元素進行互動。

4.1 Objects

const myObject = {
 name: 'John Smith',profession: 'agent'
};
console.log(myObject);

可以展開和摺疊物件屬性列表，也可以看到物件的原型。

4.2 Arrays

const characters = ['Neo','Morpheus','John Smith'];

console.log(characters);
4.3 DOM 樹結構

我們可以直接與控制檯中顯示的DOM元素進行互動。

console.log(document.getElementById('root'));

在Chrome控制檯中，可以擴充套件DOM元素

4.4 互動式巢狀裡的訊息

％o說明符（為值關聯了正確的列印格式）可以在文字訊息中插入陣列，物件，DOM元素和常規文字，而不會失去互動性。

const myObject = {
 name: 'John Smith',profession: 'agent'
};

console.log('Neo,be aware of %o',myObject);

從控制檯看，myObject陣列不會轉換為字串，而是保持互動性。

5.在 Node 控制檯中列印大物件

Node中的log以純文字形式輸出。 但是，Node 中的console.log()不會顯示具有深層巢狀的物件：第3級的物件顯示為[Object]。

const myObject = {
 propA: {
  propB: {
   propC: {
    propD: 'hello'
   }
  }
 }
};

console.log(myObject);

執行指令碼時，propC的物件列印為[Object]：

要檢視完整的物件結構，可以使用jsON.stringify():

const myObject = {
 propA: {
  propB: {
   propC: {
    propD: 'hello'
   }
  }
 }
};

console.log(jsON.stringify(myObject,null,2));

JSON.stringify(myObject,2)返回該物件的JSON表示形式，第三個引數2在空格中設定縮排大小。

希望這5個技巧可以使你使用 console.log() 體驗更加高效。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。