我們知道 console.log(message)用法很簡單，表示將參數(shù)message 打印到控制臺上。

console.log('前端小智') 
// 前端小智 
 
const myAge = 28 
console.log(myAge) // 28 

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

1. 打印全名變量

如果在控制臺打印多個變量，是數(shù)量比較多的情況下，我們很難區(qū)別哪個變量對應哪個值。

function sum(a, b) { 
  console.log(b); 
  return a + b; 
} 
 
sum(1, 2); 
sum(4, 5); 

執(zhí)行上述代碼后，我們只會看到一系列數(shù)字：

 

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

2. 高級格式化

將某些東西打印到控制臺最常見方法是簡單地使用一個參數(shù)調用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轉換為數(shù)字。

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

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

具有樣式的打印風格

瀏覽器控制臺允許我們將樣式應用于打印的消息，我們可以通過將%c說明符與相應的CSS樣式一起使用來實現(xiàn)，如下所示：

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

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

4. 交互展示

日志樣式化依賴于主機的控制臺實現(xiàn)。像Chrome和Firefox這樣的瀏覽器提供對象和數(shù)組的交互展示，而 Node 控制臺輸出為文本。

來看看Chrome如何打印普通對象，數(shù)組和DOM樹，可以通過展開和折疊與這些元素進行交互。

(1) Objects

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

在Chrome控制臺中，myObject的打印如下所示：

可以展開和折疊對象屬性列表，也可以看到對象的原型。

(2) Arrays

const characters = ['Neo', 'Morpheus', 'John Smith'];  
console.log(characters); 

(3) DOM 樹結構

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

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

在Chrome控制臺中，可以擴展DOM元素，并可以全面瀏覽其內容：

(4) 交互式嵌套里的消息

%o說明符(為值關聯(lián)了正確的打印格式)可以在文本消息中插入數(shù)組，對象，DOM元素和常規(guī)文本，而不會失去交互性。

const myObject = { 
  name: 'John Smith', 
  profession: 'agent' 
}; 
 
console.log('Neo, be aware of %o', myObject); 

從控制臺看，myObject數(shù)組不會轉換為字符串，而是保持交互性。

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, null, 2)返回該對象的JSON表示形式，第三個參數(shù)2在空格中設置縮進大小。

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