JavaScript中console的用法，console：我是最靓的仔！

还记得当初在学校学java时，用System.out.println("HelloWorld");打印了我人生的第一行代码，
当时我就觉得我是最靓的仔，
我就是能干翻java的仔，直到毕业后我才知道，原来我只会打印HelloWorld。。。
为了不仅仅只会打印HelloWorld，我把JavaScript中console学了一遍，现在我觉得我又是个最靓的仔了，呵呵,
好了，接下来把JavaScript中console的一些用法分享给大家。

本文以谷歌浏览器为主，因为各大浏览器的输出还是有差别的

一、使用较多的四个方法

可以用\n换行

console.log('log\n最常见用法');
console.info('info\n打印一般信息');
console.warn('warn\n警告信息');
console.error('error\n错误信息');

谷歌Chrome浏览器控制台输出：

在谷歌浏览器控制台输出info信息我发现既然没有小蓝标，于是我忍痛打开了白给不要浏览器-Edge，然后输出了一下，确实是有小蓝标的，使用log和info输出还是有区别的。这里要提一下Edge浏览器，貌似最新版的Edge已经用谷歌内核了，作为复制粘贴师的我，

微软Edge浏览器控制台输出：

二、用表格输出对象或数组

用console.table();可以以表格的形式输出对象或数组

Chrome控制台输出：

领取女友码：

var girlfriendObj = {
    '1号女嘉宾': '我漂亮',
    '2号女嘉宾': '我年轻',
    '3号女嘉宾': '我贤惠',
    '4号女嘉宾': '我有钱'
};
console.log('控制台：请选择女友：');
console.table(girlfriendObj);
console.log('我：全都要');
console.log('控制台：恭喜你答案正确，进入下一关！');
console.log('');
console.log('控制台：女生来大姨妈你应该怎么做?');
var girlfriendArr = ['多给她拥抱', '主动承担家务', '逗她开心', '多喝热水'];
console.table(girlfriendArr);
console.log('你：我选0、1、2');
console.log('控制台：答案错误，你没有女朋友！');

三、计算一段代码使用的时间

可以使用console.time();和console.timeEnd();来计算一段代码执行需要的时间，
因为他俩是男女关系，所以括号里需要传一个标记符，用于配对，
标记符必须拥有唯一的名字，而且开始和结束都要用同一个标记符

使用事例：

//1
console.time('找到女朋友需要多长时间');
for (var i = 0; i < 999999999; i++) {
    ;
}
console.timeEnd('找到女朋友需要多长时间');
//2
console.time('点个赞需要多少秒');
setTimeout(function () {
    console.timeEnd('点个赞需要多少秒');
}, 1000);

四、清空控制台输出

console.clear('麻烦清理一下，我是程序猿，不需要女朋友');//清空控制台,其实不用传参数的

清理完毕后会提示控制台被清除：

五、使用字符串替换

替换字符串	描述
%o or %O	打印 JavaScript 对象。在审阅器点击对象名字可展开更多对象的信息。
%d or %i	打印整数。支持数字格式化。例如, console.log(“Foo %.2d”, 1.1) 会输出有先导 0 的两位有效数字: Foo 01。
%s	打印字符串。
%f	打印浮点数。支持格式化，比如 console.log(“Foo %.2f”, 1.1) 会输出两位小数: Foo 1.10

使用事例：

for (var i = 0; i < 5; i++) {
    console.log(" 我的%s增加到了%d个！", "女朋友", i + 1);
}

Chrome控制台输出：

六、为控制台定义样式

可以使用 %c 为打印内容定义样式：

使用格式：console.log(%c 文本, 样式)；
切分样式：console.log(%c 文本1 %c 文本2, 样式1，样式2)；
每一个%c依次对应括号后面传的一个样式；

以下的css样式我试了下都可以用:

var myText = "%c my name is weianl";
var myStyle = `color:#fff;
               font-size: 50px; 
               padding: 50px 100px;
               line-height: 200px;
               letter-spacing:200px;
               background-color: #000;
               background-image: linear-gradient(to right, red , yellow); 
               text-shadow: 5px 5px 5px #FF0000;
               text-decoration:underline; 
               text-indent:100px;
               text-transform:capitalize;
               border-radius: 100px 0 100px 0;
               `
console.log(myText, myStyle);

七、各大网站控制台输出的实现

①百度的输出：

实现代码：

var baiduText = `你在电脑前看这段文字，\n写文字的人在百度等你。\nN年前你来到了这个世界，\nN年后你想改变世界。
\n期待你脚踏祥云，\n与百度一起改变世界。`;
console.log(baiduText);
var hireText = `%c百度2020校园招聘简历提交：http://dwz.cn/XpoFdepe`;
var hireStyle = 'color:red';
console.log(hireText, hireStyle);

②京东的输出：

实现代码：

var jingdongText = `%c本页面由 凹凸实验室（JDC-体验技术部） 负责开发，你可以通过 https://aotu.io 了解我们。
\n如果你对我们在做的事情也有兴趣，欢迎加入 aotu@jd.com（注明来自console）
\n本项目骄傲的使用了 凹凸实验室 出品的Nerv框架，相关内容及生态你可以通过官网了解更多。\nhttps://nerv.aotu.io/`;
var jingdongStyle = `color:#6190E8`
console.log(jingdongText, jingdongStyle);

③简书的输出：

实现代码：

var leftGrayStyle = `background-color: #606060;color:white;padding:1px 3px;border-radius:3px 0 0 3px;`;
var rightGreenStyle = `background-color: #42C02E;color:white;padding:1px 3px;border-radius:0 3px 3px 0;`;
var rightBlueStyle = `background-color: #1475B2;color:white;padding:1px 3px;border-radius:0 3px 3px 0;text-align: center;`;
console.log(`%c Environment %c production `, leftGrayStyle, rightGreenStyle);
console.log(`%c Platform %c shakespeare `, leftGrayStyle, rightBlueStyle);
console.log(`%c Version  %c 1.1.0 `, leftGrayStyle, rightBlueStyle);
console.log(`%c Build Date %c 2020-05-26T17:46:19.130Z `, leftGrayStyle, rightBlueStyle);

④知乎的输出：

实现代码：

    var zhihuText = `%c
          _____                    _____                    _____                    _____          
         /\\    \\                  /\\    \\                  /\\    \\                  /\\    \\         
        /::\\____\\                /::\\    \\                /::\\    \\                /::\\    \\        
       /:::/    /                \\:::\\    \\              /::::\\    \\              /::::\\    \\       
      /:::/    /                  \\:::\\    \\            /::::::\\    \\            /::::::\\    \\      
     /:::/    /                    \\:::\\    \\          /:::/\\:::\\    \\          /:::/\\:::\\    \\     
    /:::/____/                      \\:::\\    \\        /:::/__\\:::\\    \\        /:::/__\\:::\\    \\    
   /::::\\    \\                      /::::\\    \\      /::::\\   \\:::\\    \\      /::::\\   \\:::\\    \\   
  /::::::\\    \\   _____    ____    /::::::\\    \\    /::::::\\   \\:::\\    \\    /::::::\\   \\:::\\    \\  
 /:::/\\:::\\    \\ /\\    \\  /\\   \\  /:::/\\:::\\    \\  /:::/\\:::\\   \\:::\\____\\  /:::/\\:::\\   \\:::\\    \\ 
/:::/  \\:::\\    /::\\____\\/::\\   \\/:::/  \\:::\\____\\/:::/  \\:::\\   \\:::|    |/:::/__\\:::\\   \\:::\\____\\
\\::/    \\:::\\  /:::/    /\\:::\\  /:::/    \\::/    /\\::/   |::::\\  /:::|____|\\:::\\   \\:::\\   \\::/    /
 \\/____/ \\:::\\/:::/    /  \\:::\\/:::/    / \\/____/  \\/____|:::::\\/:::/    /  \\:::\\   \\:::\\   \\/____/ 
          \\::::::/    /    \\::::::/    /                 |:::::::::/    /    \\:::\\   \\:::\\    \\     
           \\::::/    /      \\::::/____/                  |::|\\::::/    /      \\:::\\   \\:::\\____\\    
           /:::/    /        \\:::\\    \\                  |::| \\::/____/        \\:::\\   \\::/    /    
          /:::/    /          \\:::\\    \\                 |::|  ~|               \\:::\\   \\/____/     
         /:::/    /            \\:::\\    \\                |::|   |                \\:::\\    \\         
        /:::/    /              \\:::\\____\\               \\::|   |                 \\:::\\____\\        
        \\::/    /                \\::/    /                \\:|   |                  \\::/    /        
         \\/____/                  \\/____/                  \\|___|                   \\/____/         

知乎(zhihu.com)，招聘前端开发工程师 http://zhi.hu/BDXoD
    `;
    console.log(zhihuText, "height:12px;font-size:12px;line-height:15px;");

⑤天猫的输出：

实现代码：

    var safetyStyle = `font-size:50px;
                       color:red;
                       -webkit-text-fill-color:red;
                       -webkit-text-stroke: 1px black;`;
    console.log("%c 安全警告！", safetyStyle);
    console.log('%c 此浏览器功能专供开发者使用。请不要在此粘贴执行任何内容，这可能会导致您的账户受到攻击，给您带来损失 ！', "font-size: 20px;color:#333");
    var catText =`   :::                                :::  
 :::::::                             ::::: 
:::::::::                          ::::::::
:::::::::::::::::::::::::::::::::::::::::::
::::    :::    ::::::::::::::::   :::  ::::
:::    Smart    :::::cool::::    Crazy  :::
:::::   :::    :::::::::::::::    :::   :::
:::::::::::::::::::::::::::::::::::::::::::

喵~ 加入我们吧 https://tb.cn/iS8NBOy`
    console.log(catText);

因为Console有很多方法，所以我这里就说一下常用的和好玩的，想了解具体的可以去MDN看看：传送门

==》over