原来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种形式
console.log(obj1 [, obj2, ..., objN);
console.log(msg [, subst1, ..., substN);
console.log('String: %s, Int: %d,Float: %f, Object: %o', str, ints, floats, obj)
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
发表评论 (审核通过后显示评论)：