這篇文章主要介紹了怎樣為JavaScript代碼日志著色，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
前言
在使用 JavaScript 開(kāi)發(fā)項(xiàng)目，可借助 console.log 來(lái)打印日志，以便捷分析問(wèn)題；但，當(dāng)接觸相對(duì)比較項(xiàng)目，純黑色的日志輸出，就會(huì)使得其作用大大削弱；雖然 info， wran、error 等方法會(huì)區(qū)別顏色輸出，但各自皆有其職責(zé)，不便挪來(lái)加以濫用；此時(shí)，就需求擴(kuò)展些方法，來(lái)為你的 JavaScript 代碼日志著色，使得日志可以發(fā)揮更大的價(jià)值。
要實(shí)現(xiàn)這個(gè)功能，其實(shí)很簡(jiǎn)單；利用 console.log 字符串替代和格式設(shè)置功能即可；下面為其格式說(shuō)明符的完整列表：
| 說(shuō)明符 | 輸出 |
|---|---|
| %s | 將值格式化為字符串 |
| %i 或 %d | 將值格式化為整型 |
| %f | 將值格式化為浮點(diǎn)值 |
| %o | 將值格式化為可擴(kuò)展 DOM 元素。如同在 Elements 面板中顯示的一樣 |
| %O | 將值格式化為可擴(kuò)展 JavaScript 對(duì)象 |
| %c | 將 CSS 樣式規(guī)則應(yīng)用到第二個(gè)參數(shù)指定的輸出字符串 |
傳遞到任何記錄方法的第一個(gè)參數(shù)可能包含一個(gè)或多個(gè)格式說(shuō)明符。格式說(shuō)明符由一個(gè) % 符號(hào)與后面緊跟的一個(gè)字母組成，字母指示應(yīng)用到值的格式。字符串后面的參數(shù)會(huì)按順序應(yīng)用到占位符。
關(guān)于 console 更多功能和用法，可參見(jiàn) 使用控制臺(tái) | Google Developers；下面是對(duì)彩色輸出 log 的一個(gè)簡(jiǎn)單示例：
console.log(`%c 傾城之鏈: %s`, 'color: #65c294', ': 一個(gè)蠻有用的網(wǎng)站') console.log(`%c 傾城之鏈: %c%s`, 'color: #65c294', 'color: #1a1a1a', ': 一個(gè)蠻有用的網(wǎng)站')
前面提及，當(dāng)涉及到較大型項(xiàng)目，為了能從日志顯現(xiàn)代碼大致流向，最好可以封裝方法，針對(duì)不同的模塊日志，以不同顏色作下區(qū)分顯示；這在一定程度上可以將所打出的日志利益更大化；下面是對(duì)此的一點(diǎn)實(shí)踐方案：
重慶分公司
重慶分公司
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)
}
// 您可以在此定義更多方法，來(lái)區(qū)分不同模塊；
}上面代碼中，主要基于表驅(qū)動(dòng)法，根據(jù)所設(shè)計(jì)的模塊名（Eg： moduleA）以及既定色值，彩色化你的 JS 代碼日志輸出，并指明日志所在模塊；這樣一來(lái)，即可使得日志輸出更加清晰。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎樣為JavaScript代碼日志著色”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
