console.log()的神奇用法
console.log()
对于开发者来说一点也不陌生,尤其是前端开发、Web开发,这是我们离不开的调试工具。 console.log()
除了能够输出我们要调试的数据外,还有一些有趣的用法,先上图。
来看一下天猫的首页,打开调试工具能看到以下内容,有天猫服务的招聘信息,还有字符画
在来看一下百度的,也在控制台里输出了招聘信息。
我们可以发现,控制台除了输出了常规的文字,还有大小、颜色不常规的文字,这是怎么做到呢? 难道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样式格式化字符串 |
// 格式成可展开的的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%;")
插眼 , 嘿嘿
插眼,嘿嘿