前言

在工作中咱们常常会打印log去查看数据与要害逻辑。但这些log在我的项目log过多时寻找起来就会变得异样麻烦并且不标准的log打印让代码看起来不是那么的整洁与优雅，所以我想分享一个对于黑白打印log的封装办法。

console办法

在JS中咱们可能最常应用的打印log办法就是console.log了。但其实console为咱们提供了超多类型的打印办法。具体能够查看MDN的上对于console的介绍(传送门)。我这里次要应用的是console.log(), console.trace()，console.error()与console.warn()。具体还请参考MDN的介绍。这里不再过多介绍啦。

另外还须要一点的就是须要console属性的展位符。这里贴出了一个列表。具体请参考传送门。

代码

铺垫做完之后咱们这里间接贴出代码。

/*** 黑白打印console* @param {any} hint 提醒内容* @param {any} content 打印内容* @param {any} type 打印类型（log,trace,warn，error）*/function colorLog(hint, content, type = "info") {        const color = {          info: "#52c41a",          warn: "#faad14",          error: "#f5222d",          trace: "#66ccff",        };        const hintContent = `%c${hint}`;        const hintStyle = `          vertical-align: middle;          display: flex;          height: 100%;          line-height: 1.5;          background: ${color[type]};           color: white;           border-radius: 3px 0 0 3px;           font-size: 14px;           padding: 0 5px;          box-sizing: border-box;          background-clip: border-box;        `;        console[type](`${hintContent}`, `${hintStyle}`, content);}// 调用colorLog("test", "111", "info");colorLog("test", "111", "error");colorLog("test", "111", "warn");colorLog("test", "111", "trace");

阐明:

  1. 这里应用log时它的调用指向都是指向这个封装办法的，并不能定位到调用这个办法的中央，所以我这边采纳trace办法来追踪调用轨迹。
  2. 这里倡议在打印数据与一些无关调用定位时采纳前log，如果须要打印一些要害逻辑并须要追踪调用栈的时候还是须要采纳trace，而error与warn也能够追踪调用轨迹。

打印后果展现

结语

以上就是黑白打印办法的封装。心愿能够帮忙到大家对本人的log进行一些规范化解决，让代码看起来更简洁。