我們知道 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
|
1
2
3
4
5
|
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元素和常規文本，而不會失去交互性。
|
1
2
3
4
5
6
|
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]。
|
1
2
3
4
5
6
7
8
9
10
11
|
const myObject = { propA: { propB: { propC: { propD: 'hello' } } }};console.log(myObject); |
運行腳本時，propC的對象打印為[Object]：
要查看完整的對象結構，可以使用jsON.stringify():
|
1
2
3
4
5
6
7
8
9
10
11
|
const myObject = { propA: { propB: { propC: { propD: 'hello' } } }};console.log(jsON.stringify(myObject, null, 2)); |
JSON.stringify(myObject, null, 2)返回該對象的JSON表示形式，第三個參數2在空格中設置縮進大小。
希望這5個技巧可以使你使用 console.log() 體驗更加高效。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://www.cnblogs.com/Qooo/p/13744535.html
