console.log和它的大家族

此文为笔者测试后的一些整理，帮助笔者记忆。笔者为前端小白，故不建议将此文作为教程使用。如笔者理解有误还望大佬多多指教。

一. console.log

常用方法

 console.log("这是一段文字")
 console.log(1234)
 console.log({id:1})

输出结果:

输出结果

占位符

console支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）、对象（%o)和css（%c)。

普通占位符

//字符串 (%s)
console.log("%s测试%s","字符串","占位");
//整数 (%d ro %i)
console.log("%d年%i月%d日",2019,4,1.11);
//浮点数 (%f)
console.log("%f测试%f",1,1.11)
//dom节点 (%o)
console.log("%o",document.getElementById("div"))
//dom节点对象展开 (%O)
console.log("%O",document.getElementById("div"))

输出结果:

输出结果

注意%o与%O，在输出普通对象时它们并没有什么不同，但是对于dom节点来说他们的输出形式是完全不同的，如果你想查看dom节点的属性那么请尝试用%O占位符。

CSS占位符

console.log在控制台打印的内容是可以添加样式的（如字号，颜色等），一些网站就利用这个功能做出了不错的效果。如图:

百度控制台的效果

哔哩哔哩控制台的效果

翠花，上代码

console.log('测试%c测试','background:#aaa;color:#f44');
console.log('%c测试%c测试','background:#aaa;color:#f44','background:#000;color:#fff;font-size:22px;');

输出结果

输出结果

注意：%c占位符只会给占位符后的文字添加样式，作用范围为%c到此语句结束（并不会因为下一个%c占位符的存在而结束）。在文字内容前方离文字越近的占位符的样式优先级越高。

它的兄弟姐妹

//其实可以直接把它们打印出来
console.log(console);

输出结果

输出结果

未完待续...