发现不一样的控制台 - Console

    技术2025-02-24  45

    以前,只知道使用 console.log( ) 在控制台输出信息。

    直到有一天,我发现 console 可不只有 log 方法

    console 有 table 方法可以表格形式在控制台打印 Object 或 Array 类型的数据

    console 还有计时器可用来测试程序性能

    此外,log 方法也可以指定返回数据类型,规则基本与 python 的 printf 一致

    你甚至可以自定义打印样式

    废话不多说,直接上代码:

    console.log('%f', 123); // 浮点型 => 123.000000 console.log('%.2f', 123); // 保留两位小数, 浮点型 => 123.00 console.log('%d', 123.123); // 整型 => 123 console.log('%i', 123.123); // 同 %d, 整型 => 123 console.log('%.3d', 13.13); // 整型 => 013 console.log('%s', 'string'); // 字符串 => string console.log('%o', "{'name': 'ZQ'}"); // 可以是整数,字符串,JSON对象 => name: Zq console.log('%c定义样式', 'background: pink; color: blue; padding: 5px; border-radius: 10px'); // 定义样式 // 打印表格 var arr = [ ['name', 'age', 'weight'], ['zq', 20, '50kg'], ['zj', 16, '44kg'] ]; console.table(arr); console.assert(1+1==3, '傻了吧你!!!'); //如果断言为false,则在控制台输出错误信息;ture 则无输出 console.warn('警告!!!'); //打印警告信息 console.error('错误???'); //打印错误信息 console.info('console.info <=> console.log'); // 计时器 console.time('计时器1'); for (var i = 0; i < 10000; i++) { for (var j = 0; j < 10000; j++) {} } console.timeEnd('计时器1'); // => 1.xxx 毫秒 - 倒计时结束

    最终控制台输出结果:

    FireFox :全支持

    Chrome

    不支持指定数值类型与小数点位数,统一输出为整型

    Edge:仅支持部分

    指定浮点型也是返回整型 不可指定小数点位数,会当做字符串处理 不支持输出文本自定义样式

    参考资料 Console - Web API 接口参考 | MDN
    Processed: 0.010, SQL: 9