console.log格式化這一用法一般都在個人博客或其他官網上有,當F12查看網頁元素時,在控制台(console)那里偶爾會發現一些個性化的輸出,其實現原理不難看一遍就曉得,具體實現如下:
一、console.log格式化打印
console.log支持的格式標志有:
占位符 | 描述 |
---|---|
%s | 字符串 |
%d%i | 整數 |
%f | 浮點數 |
%o/%O | object對象 |
%c | css樣式 |
1、%c 表示css樣式
2、%d 和 %i 表示整數
3、%f 表示浮點類型number
4、%s 表示字符串類型
console.log("%s","first","second"); // 輸出結果:first second
5、%o 表示DOM元素
6、%O 表示javascript對象
7、輸出 %
console.log("%%"); // 輸出結果:% console.log("%%","zzk"); // 輸出結果:% zzk
二、console對象的一些方法
首先在控制台(console)輸入console回車,會看到
常用的方法有:
log // 打印日志
debug // 打印調試
error // 打印錯誤
info // 打印信息
warn // 打印警告
assert // 打印斷言
clear // 清空控制台
console.time & console.timeEnd
這是性能調試的利器啊,熟悉NodeJs的童鞋更是清楚。肯定不少童鞋干過這事:在我們的某塊代碼前新增一個類似startTime的變量,給它一個時間戳,然后在我們執行完代碼后,再打一個時間戳,再將兩者相減,再將結果輸出。現在我們使用上面的函數,就可以省下很多功夫了:
console.time('wait'); setTimeOut(()=>{ console.timeEnd('wait'); },1000); wait: 1000ms
使用這兩個接口是何其方便!而且我們還可以將一個字符串作為函數參數,來區分不同的性能計時。
console.count
這是一個計數器,我們可以傳個名字給它,如a,然后每次調用console.count(‘a’)(可以在不同函數不同地方),它就能打印出這樣一個調用執行了多少次:
let a = ()=>{ console.count('Call function a'); }; let b = ()=>{ a(); } let c = ()=>{ b(); } b(); c(); Call function a:1 Call function a:2
這個函數特別適用於在一些復雜的場景,有時一個函數被多個地方調用到,而我們想知道該函數是否少調用或重復調用,此時使用計數器比js斷點自己還要默記調了幾次快多了。
console.assert
assert,搞編程的應該對這個單詞不陌生:斷言。
let a = ()=>{ let el = document.getElementById('test'); console.assert(el,'沒有ID為test的節點'); } a(); // Assertion failed: 沒有ID為test的節點
不難說,使用該函數可以讓我們在某些地方只在符合某個條件才進行調試輸出,使輸出更加干凈。當然你也可以用if語句,不過寫起來就麻煩了一些。
console.group
一看就知道是分組輸出:
console.group('group1'); console.log('a'); console.log('b'); console.groupEnd('group1'); console.group('group2'); console.log('a2'); console.log('b2'); console.groupEnd('group2');
顯然這個函數特別適合有一大堆調試輸出的情況,做大項目估計會用上。不過有時你打開控制台看到滿屏滿屏的輸出你也會很頭痛的,於是你可以分組輸出且默認收起。
console.clear
最后的最后,該清場了。
特別適用於,在一個多人開發項目,你不爽別人的調試輸出,那你可以用這個函數統統清掉,再輸出自己的調試信息,不用跟這個函數客氣。