如何为你的JavaScript代码日志着色详解
前言
在使用JavaScript开发项目，可借助console.log来打印日志，以便捷分析问题；但，当接触相对比较项目，纯黑色的日志输出，就会使得其作用大大削弱；虽然info，wran、error等方法会区别颜色输出，但各自皆有其职责，不便挪来加以滥用；此时，就需求扩展些方法，来为你的JavaScript代码日志着色，使得日志可以发挥更大的价值。
要实现这个功能，其实很简单；利用console.log字符串替代和格式设置功能即可；下面为其格式说明符的完整列表：
| 说明符 | 输出 |
|---|---|
| %s | 将值格式化为字符串 |
| %i或%d | 将值格式化为整型 |
| %f | 将值格式化为浮点值 |
| %o | 将值格式化为可扩展DOM元素。如同在Elements面板中显示的一样 |
| %O | 将值格式化为可扩展JavaScript对象 |
| %c | 将CSS样式规则应用到第二个参数指定的输出字符串 |
传递到任何记录方法的第一个参数可能包含一个或多个格式说明符。格式说明符由一个%符号与后面紧跟的一个字母组成，字母指示应用到值的格式。字符串后面的参数会按顺序应用到占位符。
关于console更多功能和用法，可参见使用控制台|GoogleDevelopers；下面是对彩色输出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)=>{
constregStr=`%c@λ~${theme.toLocaleUpperCase()}:${_gGetMatchStr(args)}`
constcolor=_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=>{
constcMatchArr=[]
for(letkeyinargs){
cMatchArr.push(_gRegMatchObj[typeofargs[key]])
}
returncMatchArr.join('')
}
const$log={
moduleA:(...args)=>{
_gConsole('moduleA',args)
},
moduleB:(...args)=>{
_gConsole('moduleB',args)
}
//您可以在此定义更多方法，来区分不同模块；
}
上面代码中，主要基于表驱动法，根据所设计的模块名（Eg：moduleA）以及既定色值，彩色化你的JS代码日志输出，并指明日志所在模块；这样一来，即可使得日志输出更加清晰。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对毛票票的支持。