铭哥和佩佩的博客

铭哥和佩佩的博客分享Python、PHP、JavaScript、HTML5、CSS3等各种知识

console.log()的神奇用法

console.log()对于开发者来说一点也不陌生,尤其是前端开发、Web开发,这是我们离不开的调试工具。 console.log()除了能够输出我们要调试的数据外,还有一些有趣的用法,先上图。
来看一下天猫的首页,打开调试工具能看到以下内容,有天猫服务的招聘信息,还有字符画
Snip20170523_2.png
在来看一下百度的,也在控制台里输出了招聘信息。
Snip20170523_3.png
我们可以发现,控制台除了输出了常规的文字,还有大小、颜色不常规的文字,这是怎么做到呢? 难道css也能修饰console.log输出的内容?

基本语法

console.log()的基本语法

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

平常我们使用console.log()的时候一般只会用到第一个参数,写什么,控制台就会输出什么,不论是字符串、数字还是对象,什么都是可以往里写。 但其实 console.log()是有多个参数的, 如果第一个参数是字符串的话,字符串里面是可以写占位符的,后面的参数自然是用来代替占位符的真是内容。 有点像C语言的printf()函数,当然不关c语言,php中也有springf()函数,当然绝大部分语言都有这样的函数或语法结构。
用法示例

console.log("%s love you", "yanyan")
//会输出 yanyan love you  
//第二个参数就代替了 第一个占位符%s

console.log("%s有%f米高", "yanyan", 1.76);
//会输出 yanyan有1.76米高
//其中 yanyan代替了%s,  1.76代替了%f

占位符

占位符除了上面例子中用到的%s,%f之外,还有很多

格式占位符 做用
%s 字符串
%d 或 %i 整数
%f 浮点数
%o 可展开的DOM
%O 列出DOM的属性
%c 根据提供的css样式格式化字符串
%o和%O在普通对象上的表现是一样的,但是在DOM上就有区别了:
// 格式成可展开的的DOM,像在开发者工具Element面板那样可展开 
console.log('%o',document.body.firstElementChild); 

// 像JS对象那样访问DOM元素,可查看DOM元素的属性 
// 等同于console.dir(document.body) 
console.log('%O',document.body);

实在不理解,就亲自去测试一下,你就懂了

%c占位符是最常用的,使用%c占位符时,对应的后面的参数必须是CSS语句,用来对输出内容进行CSS渲染。于是,利用%c配合CSS可以做出吊炸天的效果,比如背景色、字体颜色渐变、字体3D效果、图片等,甚至可以是火星文、表情包等。

console.log("%cHello,yanyan","color: red; font-size: 100px"); 
//输出红色的、100px大小的 Hello,yanyan!

注意:

  • console不能定义img,因此用背景图片代替。
  • console不支持width和height,利用空格和font-size代替;还可以使用padding和line-height代替宽高。
  • console输出url会自动变为可以点击的超链接

字符画

像天猫的控制台中还有一个字符画, 怎么画字符画呢? 我们可以利用搜狗输入法,也可以使用字符画的在线工具

大概方法:使用在线工具生成字符画,然后复制到编辑器中,将每行开头的换行删除,且替换成\n。最后只有一行代码,即保证没有换行,最后再丢到console.log("")代码中即可,当然,也可以结合%c做出更酷炫的效果。
字符画本质上仍然是字符串,能不能把字符画直接写在字符串中呢? 但是JavaScript字符串中出现换行会报错的,不过,ES6帮我们解决了这个问题,我们可以使用运算符 ` 来定义字符串。

兼容性问题

低版本的IE6/7/8是没有控制台工具的, chrome、Firefox、IE9+ 都有console工具
IE不支持%o和%O, Firefox中把%o和%O的行为都显示为%o。
超链接 IE不可点击跳转。

##示例
可以将下面代码复制到你的编辑器中,来执行,在你的浏览器中查看效果。
也可以直接打开调试工具,在本页面中查看效果。

let pig = `
    ╭︿︿︿╮ 
    {/ o  o /}  
     ( (oo) )   
      ︶︶︶
    `;

let hert = `
   ☆☆ ☆☆  ☆☆ ☆☆
  ★★      ★       ★★
 ☆☆    祝你快乐!   ☆☆
  ★★               ★★
   ☆☆             ☆☆
     ★★         ★★
       ☆☆     ☆☆
         ★★  ★★
            ☆☆
    `;

console.log(pig,hert);

console.log("不论学前端还是后端,请访问 %chttp://unclealan.cn", "color:blue");

console.log("%c我%c爱%c你","color:orange;font-size:30px", "color:green;font-size:30px", "color:purple;font-size:30px");

console.log("%c   ", "font-size:300px;background:url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1398884738,516982899&fm=23&gp=0.jpg');background-size:100%;")

已有 2 条评论

  1. 猝不及防 说: ( )

    插眼 , 嘿嘿

  2. 猝不及防 说: ( )

    插眼,嘿嘿

添加新评论