原来console.log()还能这样玩

如果给前端开发者最常用编程语句排名，console.log()一定名列前茅。但估计很多人对console.log()的认识还在只能简单的打印文本信息而已。但其实console.log()还支持更多的用法。比如下面这样：

image.png

它的实现很简单:

console.log('%cHello world', 'font-size:100px;color:#f00;background:yellow;');

下面就系统的介绍一下console.log()的全部用法有哪些。console.log()参数可以有下面这4种形式

1. console.log(obj1 [, obj2, ..., objN);
2. console.log(msg [, subst1, ..., substN);
3. console.log('String: %s, Int: %d,Float: %f, Object: %o', str, ints, floats, obj)
4. console.log(temp的值为: ${temp})

其中1、2、4的参数形式分别是对象、字符串、模板字符串，都很容易理解，这里就不多说。
第3种情况则可以进行字符串替换。

替换字符串	说明
%o or %O	打印 JavaScript 对象，可以是整数、字符串或是 JSON 数据。
%d or %i	打印整数。
%s	打印字符串。
%f	打印浮点数。

比如下面这个例子

for (var i=0; i<5; i++) {
  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
}

输出结果

image.png

另外，console.log()还支持自定义样式。使用方法是在需要自定义的文本前面加c%。比如：

console.log('%cgreen text %cblue text %cred text ','color:green;','color:blue','color:red;')

输出：

image.png

注意：使用替换字符串和自定义样式的时候，第一个参数是字符串模板，后面的参数按顺序替换字符串模板。如果缺省，则替换字符串和自定义样式无法识别。比如下面的例子：

console.log('%cgreen text %cblue text %cred text ','color:green;','color:blue')

输出：

image.png

由于缺少了最后一个参数，所以字符串模板里的%c无法被解释，就直接变成了字符串%c。

另外，console.info(),console.warn(),console.error()都有console.log()类似的用法。

image.png

image.png

image.png

虽然这些东西都不难，而且有多少实用价值也有待商榷，但是偶尔发现一些从前从未注意过的新奇知识，哪怕很小，也能给人带来快乐吧。

参考链接：
https://developer.mozilla.org/zh-CN/docs/Web/API/console#%E5%A0%86%E6%A0%88%E8%B7%9F%E8%B8%AA
https://jingyan.baidu.com/article/9113f81b09edef2b3214c7fa.html