对于前端程序员来说console.log一定不陌生吧，还记得从我们大多数人踏入前端开始，console.log('Hello World')这一个语句是我们写的第一行JS的代码，一直伴随着整个前端开发的过程中，console.log是我们开发调试中不可或缺的一部分，那么，你真的了解console.log吗？

基本使用

console.log的基本用法肯定都用过，就像我前边说的，有多少人的前端生涯就是从一句console.log('Hello World')开始的，基础用法也通常用来打印或调试错误来使用，或者用来在控制台输出语句的，就像下边这个最简单的栗子，我在控制台声明了一个str的常量，我想让它在控制它输出，那么就需要用到console.log(str）,此时控制台就会打印出来我声明的常量了，

除此之外，console.log也可以在我们代码出现bug时候，用来判断代码是否执行，这里我就不演示了。

进阶使用

除了上边基本使用的方法，大家有没有看过一些知名网站的控制台呢？很多网站会在控制台上边发布一些招聘信息、官网信息等一些宣传自己网站本身的一些东西，这样可以筛选掉大部分不懂相关岗位技能的人，比如下边这个是百度页面的控制台，发现它上边打印了很多话，上边黑色颜色的相比都知道怎么实现的，无非就是在打印时候用转义符\n来进行换行输出，就实现了上边黑色字体换行的效果，那么像下边这种红颜色的字是如何实现的呢？

再比如下边这个是itab页面下打开控制台的样子，这个不仅文字变色了，下边还添加了背景颜色，这种的又是怎么实现的呢？

通过点击右侧文件名称，便可以看到下边图片中的console.log中有颜色的输出语句都有一个相同的特点，那就是console.log里一共有两个参数，而且第一个参数的前边都是有一个%c，第二个参数就是需要设置的相关样式。


其实并没有那么复杂，通过查阅资料可以发现，%c是 console.log() 的一个特殊占位符，用于指定要应用的样式；第一个参数：可以使用 %c 指定之后的文本使用哪种css样式渲染；第二个参数：传递一个，CSS样式的字符串，作为你想要应用的样式，例如下边这串代码，实现的效果如下图：

/***
   %c 是 console.log() 的一个特殊占位符，用于指定要应用的样式
   第一个参数：可以使用 %c 指定之后的文本使用哪种css样式渲染
   第二个参数：传递一个，CSS样式的字符串，作为你想要应用的样式
   例：console.log("%c你好", 'color: red')，在控制台中输出一个，红色文本的"你好"。
**/
const str = '我是带颜色的字体'
console.log(`%c${str}`,'color:red;')
console.log(`%c${str},并且字体更大`,'color:red;font-size:20px;')
console.log(`%c${str},并且字体更大且加粗的`,'color:red;font-size:20px;font-weight:800;')
console.log(`%c${str},并且字体更大且带背景色的`,'color:red;font-size:20px;background:yellow;')

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