console控制台也可以玩出花？给console.log返回值加样式。

一直很好奇 度娘的控制台是怎么玩的，控制台的颜色还可以改变，很好奇，然后就网上Find的了关于console控制台的花样玩法，原来是console.*可以添加css样式，这个结果挺让我意外的...

像这样：

console.log("你好啊，%c控制台",'color:red');

或像这样：

const sty02 = [
  'color: red', 
  'background: yellow', 
  'font-size: 54px',
  'border: 3px dashed red',
  'padding: 10px',
].join(';');
// 2. 利用join方法讲各项以分号连接成一串字符串
// 3. 传入styles变量
console.log('%cCSS样式都支持', sty02);

当然也可以这样：

const sty01 = ['background: #111111','color: #ddd'].join(';');
const msg = ' QUI V3.0';
console.log("****插件****")
console.log('%c%s', sty01, ' jquery.js V2.14 https://jquery.com/');
console.log('%c%s', sty01, ' vue.js V2.6.1 https://cn.vuejs.org/index.html');
console.log('%c%s', sty01, msg + ' http://ui.51qux.com/');
console.log("...")

使用方法：
他们有个共同点都是 %c 开头，我猜测试“启用css”的意思，在需要加样式的字符前面添加 %c ，后面的字符串都会加上样式（链接除外）。

那有的同学发现了 %s ，这又是个什么玩意？其实除了 %s，还有%d 、%o 、%f ......

• %s  字符类型
• %d  整型
• %f  浮点类型number
• %o  对象类型超链接

%c%s 连起来就是给指定数据类型加样式，你明白了吗？

控制台打印结果出了console.log之后还有：console.info、console.debug、console.info、console.warn、console.warn、console.error、console.table等等都可以添加自定义样式哦！有时间的朋友可以玩一玩:

const sty03 = ['color:green'].join(';'); 
console.log('%cconsole.log', sty03);
console.info('%cconsole.info', sty03);
console.warn('%cconsole.warn', sty03);
console.error('%cconsole.error', sty03);
let tables = [
    {
        name: "张三",
        sex : "男",
        age : "27"
    },
    {
        name: "李四",
        sex : "女",
        age : "28"
    },
    {
        name: "王二",
        sex : "匿名",
        age : "29"
    }
]
console.table(tables)

整体效果如下：