引言
console.log 是每一個 JavaScript 開發者都會經常用到的函數。可能很多初學者第一次使用 JS 時，就是調用的它。
console.log 可能最廣泛的用途就是輸出調試信息了吧：
console.log(current_processing);當然，還有招聘信息：
但是，你可能注意到了，百度這招聘信息寫的挺花哨啊，這字還是紅色的！
不知道各位會不會寫，反正我第一次看見的時候是不會弄的。無論你會不會打印出這樣的效果，繼續往下看，一定會有所收穫的。
彩色字？搞定！
首先，我們來看一下怎麼來打印彩色字。
console.log(msg)這，是 JS console.log 的最基本形式，也可能是大部分人所熟知的形式。
但是，其實這個 msg 後面是有東西的 —— 正是那些不起眼的參數，能夠讓我們的 log 變得“上檔次”。
根據 MDN 的定義，console.log 的定義如下：
console.log(obj1 [, obj2, ..., objN]);
console.log(msg [, subst1, ..., substN]);其中，obj1 - objN 代表的是要輸出的 JS 對象。
而 msg 則是一個包含着各種控制字符的字符串，也是我們今天的主角。而後面跟着的 subst1 - substN 都是用來替換控制字符的特殊字符串。
首先，我們來看看怎麼打印彩色字符吧。
console.log("Hello, World")這，是最基礎的 Hello World 。如果你現在運行，會得到一個純正血統的 JS HelloWorld。
但是，我們想要的是彩色輸出！別急，我們先來認識一下第一個控制字符 —— %c 。有了它，你就可以隨意往 console 裏面堆積 CSS 了 —— 沒錯，這個 %c 代表着 CSS ！
只要把 %c 放在你要使用 CSS 的字符的前面，就能開始寫 CSS 了。例如：
console.log("%cHello, World")下一步就是加上樣式了。還記得之前的 subst 嗎？它們現在可以派上用場了：
console.log("%cHello, World", "color: red")對，你沒看錯，就是 CSS ！一個 %c 對應着一個樣式，而每一個 %c 都將會把從當前字符到下一個 %c 之前的一個字符渲染上對應的 CSS 樣式。如果你用的是電腦端的話，可以按下 F12 試一試，就是這麼簡單！
如果你會一點 CSS 的話……你甚至可以弄成這樣：
但是，這玩意更普遍的用途是這樣的：
這樣的：
既然上面説了可以添加自定義 CSS ，那麼我們應該能夠完成這個挑戰。
理論存在，實踐開始。
先上最基礎的無樣式版本：
console.log(
`Powered by VueBlogger v0.1.0\n
GitHub: https://github.com/samzhangjy/VueBlogger\nPlease star & fork to support the author!`);按照剛才説的方法，在 VueBlogger 前面加上 %c ，並添加相對應的樣式：
console.log(
`Powered by %cVueBlogger v0.1.0\n
GitHub: https://github.com/samzhangjy/VueBlogger\nPlease star & fork to support the author!`,
"background-color: #1A55ED; padding: 7px; color: #fff;"
);但是，如果僅僅是這樣，你會得到一個非常藍的 console ：
還記得剛才説的嗎？
一個%c對應着一個樣式，而每一個%c都將會把從當前字符到下一個%c之前的一個字符渲染上對應的 CSS 樣式。
所以，我們只需要在 v0.1.0 前添加 %c 控制字符就 ok 啦：
console.log(
`Powered by %cVueBlogger%cv0.1.0\n
GitHub: https://github.com/samzhangjy/VueBlogger\nPlease star & fork to support the author!`,
"background-color: #1A55ED; padding: 7px; color: #fff;",
"background-color: #FCBF23; color: #000; padding: 7px;"
);但是，這樣還是會出現剛才的情況，只不過變黃了……
於是，我們可以再加個 %c ：
console.log(
`Powered by %cVueBlogger%cv0.1.0%c\n
GitHub: https://github.com/samzhangjy/VueBlogger\nPlease star & fork to support the author!`,
"background-color: #1A55ED; padding: 7px; color: #fff;",
"background-color: #FCBF23; color: #000; padding: 7px;",
""
);現在我們的 console 輸出正常了。是的，你可以通過把對應的 CSS 置空來消除前面的 CSS 效果！
那麼第二個輸出也就迎刃而解了，此處不再贅述。
哦對了，不是所有的 CSS 都能夠移至到 console 裏的 —— 請看 MDN 的詳細説明。
當然，console.log 還有其他的控制字符 —— 例如 %o, %d, %s, %f 等，此處不再贅述，可以參見 MDN 查看更多信息。其中，%d, %s, %f 與其他語言中的格式化字符串很相似（例如 C++ 的），作用也是格式化字符串、數字等信息。
console.assert —— 調試神器
如果你用過 Python 的話，你肯定會對 unittest 中形如 assertXxxx 的函數十分熟悉。現在，甚至有一部分靈魂跑到 JS 上了！沒錯，這就是 console.assert 。
按照慣例，先看定義：
console.assert(assertion, obj1 [, obj2, ..., objN]);
console.assert(assertion, msg [, subst1, ..., substN]); // C-like message formatting跟 console.log 差不多 —— 但是多了一個 assertion 。而它，就是要 assert 的對象。如果 assertion 的結果不為真，那麼將會以類似 console.error() 的樣式打印出後面的錯誤信息 msg 。
來看一個最簡單的栗子：
console.assert(![], "Yep, that's falsy.")如果 ![] 的值是非真的，那麼我們將會收到一個自定義的報錯：
那麼，如果 assert 的結果是真的，就會正常執行，沒有輸出：
同理，console.assert 也能使用 CSS：
console.assert(0.1 + 0.2 === 0.3, "%cYou can't even can't get 0.1 + 0.2 right in js.", "font-weight: bold; font-style: italic; background-color: orange; color: #000")
console.count —— 計數神器
語法：
console.count([label]);console.count 函數接收一個字符串列表，列表中的元素表示一個標籤。每次計數時，console.count 都會輸出當前標籤列表被計數的次數，並持續累積。如果沒有給出任何標籤，則會使用 default 默認標籤。
這東西用起來也很簡單，餵給它一些數據就行了：
console.count("A");
console.count("B");
console.count("A");
來做個示例：
for (var i = 1; i <= 10; i++) {
for (var j = 1; j <= i; j++) {
if (i % j == 0) console.count(i)
}
}這段代碼會輸出 1 - 10 這些數字的因數個數。
console.group —— 沒啥特別的，感覺會有用
console.group 允許你在 console 中輸出層級嵌套的信息。
你可以使用 console.group 來創建一個新層，然後使用 console.log 、console.warn 、console.error 等函數在該層級下進行輸出，最後使用 console.groupEnd() 來結束當前層。
示例：
console.log("I'm here at the top level");
console.group("Level 2 group here!");
console.log("I'm in level 2!");
console.group("Level 3!");
console.log("You know what, [] is really weird in JS.")
console.error("0.1 + 0.2 !== 0.3 in JS =(");
console.groupEnd();
console.log("Back at level 2!");
console.groupEnd();
console.info("Wow, what a trip up there!");
函數太多，不放定義啦，大家應該參照運行結果就能看懂啦。
小結
這篇文章簡單介紹了一下 console 的各種使用方法。但是，像一些過於普通的（例如 info、error、warning 等），我沒有在這裏一一介紹。
如果有小夥伴想要了解這方面的更多知識，可以前往 MDN 進行查閲，相信你一定會有新的收穫。
我是 samzhangjy ，我們下期再見！
