13518219792
这篇文章主要介绍了怎样为JavaScript代码日志着色，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
成都创新互联公司于2013年开始，是专业互联网技术服务公司，拥有项目网站设计制作、成都网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元博罗做网站,已为上家服务,为博罗各地企业和个人服务,联系电话:18980820575
前言
在使用 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 代码日志输出，并指明日志所在模块；这样一来，即可使得日志输出更加清晰。
感谢你能够认真阅读完这篇文章，希望小编分享的“怎样为JavaScript代码日志着色”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
