2024年3月31日发(作者：)

从说起(详细介绍)

，作为一个前端开发者，可能每天都会用它来分析调试，但这个简单函数背后不简单那一面,这篇文章

就为大家介绍一下

，作为一个前端开发者，可能每天都会用它来分析调试，但这个简单函数背后不简单那一面，你未必知

道……

基础

首先，简单科普这个函数的作用。前端开发者可以在js代码的任何部分调用，然后你就可以在浏览器的开

发者控制台里，看到这个函数调用的那一瞬间你指定的变量或表达式的值。

最基本的调用方法：

('123');

// 123

('1', '2', '3');

// 1 2 3

('1n2n3n');

// 1

// 2

// 3

我们可以通过上面的方式进行单个变量（表达式）、多个变量以及换行输出。而这对于日常开发的大多数情况算是够

用了。

格式化输出

('%d + %d = %d', 1, 1, 2);

// 1 + 1 = 2

写过C语言的童鞋肯定对上面这种写法不陌生，这种写法在复杂的输出时，能保证模板和数据分离，结构更加清晰。

不过简单的输出就不那么方便了。

支持的格式标志有:

前三种格式不用多说，%o、%O都是用来输出Object对象的，对普通的Object对象，两者没区别，但是打印dom节点

时就不一样了：

使用%o输出和不使用格式化输出打印出来的结果一样，你可以查看这个dom节点的内容、子节点等；而使用%O，你

看到的则是该dom节点各个对象属性。对应我们平时把数据寄放到dom节点的两种方式：

BTW，格式化输出还可以和普通输出混合着来：

('%d + %d =', 1, 1, 2);

// 1 + 1 = 2

丰富样式输出

大家等待已久的高潮来了，鼓掌，再看下妹子：

这是怎么做到的呢？其实看了上一节肯定有童鞋猜到了，那就是用%c进行css样式格式化输出。常见的富样式输出有

两种：文字样式、图片输出。

文字样式

很简单对吧？这是最简单的写法，其实%c可以写在任何地方，不限于开头，然后%c后面所有的输出会应用我们指定

的样式。

那如果我想单独对我输出的一句话中间某几个字进行样式处理呢？一般来说，没办法，不过有变通的手段：

附：输出的超链接会被自动识别并加上灰色字体颜色和下划线的样式，而这个无法用%c覆盖

图片输出