共计 3834 个字符，预计需要花费 10 分钟才能阅读完成。
引言
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，咱们下期再见！
