JS console.log()提高工作效率的技巧

本篇文章給大家分享的是有關(guān)JS console.log()提高工作效率的技巧，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

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

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

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

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

1. 打印全名變量

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

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

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

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

要表示值和變量之間關(guān)系，可以用花括號把變量包起來：：

2.高級格式化

將某些東西打印到控制臺最常見方法是簡單地使用一個(gè)參數(shù)調(diào)用console.log()：

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

有時(shí)我們可能想要一條包含多個(gè)變量的信息。 幸運(yùn)的是，console.log()可以使用％s，％i等說明符以sprintf()的方式格式化字符串。

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

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

％s和％i被user和attempts的值替換。 說明符％s轉(zhuǎn)換為字符串，而％i轉(zhuǎn)換為數(shù)字。

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

3.具有樣式的打印風(fēng)格

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

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

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

4. 交互展示

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

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

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 樹結(jié)構(gòu)

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

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

在Chrome控制臺中，可以擴(kuò)展DOM元素

4.4 交互式嵌套里的消息

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

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

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

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

5.在 Node 控制臺中打印大對象

Node中的log以純文本形式輸出。 但是，Node 中的console.log()不會顯示具有深層嵌套的對象：第3級的對象顯示為[Object]。

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

console.log(myObject);

運(yùn)行腳本時(shí)，propC的對象打印為[Object]：

要查看完整的對象結(jié)構(gòu)，可以使用jsON.stringify():

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

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

JSON.stringify(myObject, null, 2)返回該對象的JSON表示形式，第三個(gè)參數(shù)2在空格中設(shè)置縮進(jìn)大小。

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

以上就是JS console.log()提高工作效率的技巧，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。