如何为你的JavaScript代码日志着色详解

前言

在使用 javascript 开发项目，可借助 console.log 来打印日志，以便捷分析问题；但，当接触相对比较项目，纯黑色的日志输出，就会使得其作用大大削弱；虽然 info， wran、error 等方法会区别颜色输出，但各自皆有其职责，不便挪来加以滥用；此时，就需求扩展些方法，来为你的 javascript 代码日志着色，使得日志可以发挥更大的价值。

要实现这个功能，其实很简单；利用 console.log 字符串替代和格式设置功能即可；下面为其格式说明符的完整列表：

说明符	输出
%s	将值格式化为字符串
%i 或 %d	将值格式化为整型
%f	将值格式化为浮点值
%o	将值格式化为可扩展 dom 元素。如同在 elements 面板中显示的一样
%o	将值格式化为可扩展 javascript 对象
%c	将 css 样式规则应用到第二个参数指定的输出字符串

传递到任何记录方法的第一个参数可能包含一个或多个格式说明符。格式说明符由一个 % 符号与后面紧跟的一个字母组成，字母指示应用到值的格式。字符串后面的参数会按顺序应用到占位符。

关于 console 更多功能和用法，可参见 使用控制台 | google developers；下面是对彩色输出 log 的一个简单示例：

console.log(`%c 倾城之链: %s`, 'color: #65c294', ': 一个蛮有用的网站')
console.log(`%c 倾城之链: %c%s`, 'color: #65c294', 'color: #1a1a1a', ': 一个蛮有用的网站')

前面提及，当涉及到较大型项目，为了能从日志显现代码大致流向，最好可以封装方法，针对不同的模块日志，以不同颜色作下区分显示；这在一定程度上可以将所打出的日志利益更大化；下面是对此的一点实践方案：

const _glogcolorobj = {
 modulea: '#009ad6', // 青色
 moduleb: '#65c294' // 若竹色
}

const _gconsole = (theme, args) => {
 const regstr = `%c@λ~${theme.tolocaleuppercase()}: ${_ggetmatchstr(args)}`
 const color = _glogcolorobj[theme]
 console.log(regstr, `color: ${color}`, ...args)
}

const _gregmatchobj = {
 object: '%o',
 function: '%o',
 number: '%i',
 string: '%s',
 undefined: '%s',
 boolean: '%s'
}

const _ggetmatchstr = args => {
 const cmatcharr = []
 for (let key in args) {
 cmatcharr.push(_gregmatchobj[typeof args[key]])
 }
 return cmatcharr.join(' ')
}

const $log = {
 modulea: (...args) => {
 _gconsole('modulea', args)
 },
 moduleb: (...args) => {
 _gconsole('moduleb', args)
 }
 // 您可以在此定义更多方法，来区分不同模块； 
}

上面代码中，主要基于表驱动法，根据所设计的模块名（eg： modulea）以及既定色值，彩色化你的 js 代码日志输出，并指明日志所在模块；这样一来，即可使得日志输出更加清晰。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。