JS_console.log()的进阶使用_console打印控制台样式_编码图案

- 日理万妓 2022-12-06 15:52 187阅读 0赞

### 1. 基本语法： ###

console.log(object [, object, …])

### 2. 占位符: ###

console上述的集中度支持printf的占位符格式，支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）:

<table> 
 <thead> 
  <tr> 
   <th>占位符</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>%s</td> 
   <td>字符串</td> 
  </tr> 
  <tr> 
   <td>%d or %i</td> 
   <td>整数</td> 
  </tr> 
  <tr> 
   <td>%f</td> 
   <td>浮点数</td> 
  </tr> 
  <tr> 
   <td>%o</td> 
   <td>可展开的DOM</td> 
  </tr> 
  <tr> 
   <td>%O</td> 
   <td>列出DOM的属性</td> 
  </tr> 
  <tr> 
   <td>%c</td> 
   <td>根据提供的css样式格式化字符串</td> 
  </tr> 
 </tbody> 
</table>

*  图片输出

console.log("%c","background:url(图片路径) no-repeat;padding:50px 300px;line-height:120px");

*  换行输出

console.log([
    	"第一行",
    	"第二行"
    ].join('\n'));

不过要注意了：

*  console不能定义img，因此用背景图片代替。
 *  console不支持width和height，利用空格和font-size代替；还可以使用padding和line-height代替宽高。
 *  chrome没出来？没出来就对了……不支持啊！原因是ConsoleViewMessage.js源码把url和谐掉了。不过可以下载firebug插件查看啦~ gif图片也是支持的~~~
 *  console是默认换行的。

### 控制台样式案例： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70_pic_center]

console.log("%c响应数据%c"+new Date(),
    	'background: #00cc00; color: #fff; border-radius: 3px 0 0 3px;padding:2px 5px',
    	'background: #1475B2; color: #fff; border-radius: 0 3px 3px 0;padding:2px 5px',
    )

### 制作我们自己的字符图案： ###

ASCII字符画制作工具，图片转ascll字符  
[img2txt][]  
[ASCII Generator Portable(将图片转为字符画) v2.0下载][ASCII Generator Portable_ v2.0]

制作思路：找到一个我们喜欢图案，变成这样的字符形式，然后字符形式的图案的换行（\\r\\n）都去掉，换成 \\n，这样就能正确的在console.log()中正确打印。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/89f8e1c275124deaa9072a8708eead21.png
[img2txt]: https://www.degraeve.com/img2txt.php
[ASCII Generator Portable_ v2.0]: https://pan.baidu.com/share/link?shareid=3161588673&uk=3509597415