這篇文章主要介紹了怎樣為JavaScript代碼日志著色，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目網(wǎng)站設計制作、成都網(wǎng)站建設網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元博羅做網(wǎng)站,已為上家服務,為博羅各地企業(yè)和個人服務,聯(lián)系電話:18980820575

前言

在使用 JavaScript 開發(fā)項目，可借助 console.log 來打印日志，以便捷分析問題；但，當接觸相對比較項目，純黑色的日志輸出，就會使得其作用大大削弱；雖然 info， wran、error 等方法會區(qū)別顏色輸出，但各自皆有其職責，不便挪來加以濫用；此時，就需求擴展些方法，來為你的 JavaScript 代碼日志著色，使得日志可以發(fā)揮更大的價值。

要實現(xiàn)這個功能，其實很簡單；利用 console.log 字符串替代和格式設置功能即可；下面為其格式說明符的完整列表：

傳遞到任何記錄方法的第一個參數(shù)可能包含一個或多個格式說明符。格式說明符由一個 % 符號與后面緊跟的一個字母組成，字母指示應用到值的格式。字符串后面的參數(shù)會按順序應用到占位符。

關于 console 更多功能和用法，可參見 使用控制臺 | Google Developers；下面是對彩色輸出 log 的一個簡單示例：

console.log(`%c 傾城之鏈: %s`, 'color: #65c294', ': 一個蠻有用的網(wǎng)站')
console.log(`%c 傾城之鏈: %c%s`, 'color: #65c294', 'color: #1a1a1a', ': 一個蠻有用的網(wǎng)站')

前面提及，當涉及到較大型項目，為了能從日志顯現(xiàn)代碼大致流向，最好可以封裝方法，針對不同的模塊日志，以不同顏色作下區(qū)分顯示；這在一定程度上可以將所打出的日志利益更大化；下面是對此的一點實踐方案：

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)
 }
 // 您可以在此定義更多方法，來區(qū)分不同模塊； 
}

上面代碼中，主要基于表驅動法，根據(jù)所設計的模塊名（Eg： moduleA）以及既定色值，彩色化你的 JS 代碼日志輸出，并指明日志所在模塊；這樣一來，即可使得日志輸出更加清晰。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“怎樣為JavaScript代碼日志著色”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!