前言
在使用 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 代碼日志輸出，并指明日志所在模塊；這樣一來，即可使得日志輸出更加清晰。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對VeVb武林網的支持。
新聞熱點
疑難解答
