帶你重拾JavaScript(2)之console的你所不知道的功能
JavaScript最常用的調試工具就是console.info()了。console是瀏覽器中window對象的屬性之一，由瀏覽器對象模型（BOM）提供，作用是訪問瀏覽器控制臺，你可以通過console輸出有助於調試代碼的字符串、數組、對象。console還附帶了一些你平時不了解的好用方法，本文可以豐富你的調試工具。
我們一般通過
window.console.info(‘hello world‘);
或者
console.info(‘hello world‘);
由於window可以省略所以我們使用後者以精簡代碼。
輸出信息到控制臺的四種方式：
-
console.log();
-
console.info();
-
console.warn();
-
console.error();
我們唯一要做的就是給它們（方法）傳遞一個或者多個參數。控制臺會顯示不同的圖標和顏色來表示其記錄級別。見下圖：
不同級別的記錄打印代碼
不同級別的記錄打印效果
你會註意到error日誌消息比其他消息更顯眼。視覺上區分有助於開發者在控制臺快速查看錯誤或警告信息等。你應該確保什麽時候應該警示什麽類別的日誌信息。
也許上面的功能你已經很熟悉了，那麽真正有價值的內容現在開始，請往下看。
字符串替換
這個技術可以使用字符串中的占位符來替換你向方法中傳入的其他參數。
輸入： console.info(‘hello %s‘, ‘world‘);
輸出： hello world
代碼
效果
%s是第二個參數‘world’的占位符。任何的字符串、整數、數組都可以被轉換成字符串並替換%s。如果你傳入一個對象，它將顯示為[object Object] 或 Object。
Firefox
chrome
如果你想傳入對象，你需要使用 %o 或者 %O ,而不是 %s。
console.info(‘this is an object %o‘, {obj : ‘object‘});
傳入對象
數字
字符串替換可以與整數和浮點數一起使用：
-
整數 %i 或 %d
-
浮點數 %f
輸入： console.info(‘int: %d, float: %f‘, 1, 1.5);
輸出： int: 1, float: 1.500000;
可以使用%.1f來格式化浮點數，這樣就只顯示一位小數， %nf ，你懂得（顯示n為小數）。
總結一下格式化說明符：
-
%s 使用字符串替換占位符
-
%(d or i) 使用整數替換占位符
-
%f ，%nf 使用浮點數替換占位符
-
%o or %O 占位符顯示為一個對象
-
%c 應用提供css （PS： 可以自己嘗試一下，或者看看下面的`彩蛋`吧）
字符串模板
ECMAScript6的出現，模板字符串是替換或連接的替代品。語法是使用反引號(``)來代替引號，變量包裹在 ${ } 中：
const a = ‘world‘;
console.info(` hello: ${a} `);
// hello: world
對象在模板字符串中顯示為[object Object]或 Object，所以你仍然可以使用 %o 或 %O 替換。
與你之前使用字符串拼接： console.info(‘hello: ‘ + str + ‘!‘);，使用替換或者模板創建是不是代碼更易讀呢！
彩蛋（*&……&*）
現在，我們來實現一個豐富多彩的console，當我們請求一個數據後，請求成功用綠色，請求失敗用紅色。先看效果：
豐富多彩的日誌
const success = [ ‘background: green‘, ‘color: white‘, ‘display: block‘, ‘text-align: center‘ ].join(‘;‘);
const failure = [ ‘background: red‘, ‘color: white‘, ‘display: block‘, ‘text-align: center‘ ].join(‘;‘); console.info(‘%c /dancing/bears was Successful!‘, success);
console.log({data: { name: ‘Bob‘, age: ‘unknown‘ }});
// "mocked" data response
console.error(‘%c /dancing/bats failed!‘, failure);
console.log(‘/dancing/bats Does not exist‘);
在字符串替換中使用（上文提到的） %c 占位符來應用你的日誌打印行添加樣式規則。 控制臺僅支持少數CSS樣式，並且因瀏覽器而異。
其他可用的方法
下面幾個方法都不是API標準，所以你需要在高版本瀏覽器下使用。
1、 console.assert(boolean, param); 如果第一個參數計算為FALSE，那麽返回第二個參數。如果為TRUE，那麽不顯示日誌。
斷言
2、 console.dir()；顯示一個傳入對象的可交互屬性列表，節省點開Object對象操作，還不錯。
3、 console.table( [‘javascript‘, ‘php‘, ‘java‘] ); 用一個表格顯示數組或對象
請點擊此處輸入圖片描述
chrome用戶請註意，table()是不能工作的，你可以通過將項目放入數組或對象來解決這個問題。
console.table( [[‘javascript‘, ‘php‘, ‘java‘]] );
4、 console.group(); 由至少3個console調用組成，它將輸出多個層級，顯示效果如下：
請點擊此處輸入圖片描述
5、 console.time(id) 和 console.timeEnd(id) 啟動id的定時器和停止id的定時器。
它可以同時運行多達10,000個定時器。
最後
console的有些方法雖然實用，但是因為它們的API依然在變動，具體可以訪問
https://developer.mozilla.org/en/docs/Web/API/console
結尾
如果你喜歡我的內容請關註吧，共同學習共同進步！
感謝瀏覽~~
帶你重拾JavaScript(2)之console的你所不知道的功能