給 console 添加顏色

簡評：使用 %c 聲明能夠給 console 的輸出添加 CSS 樣式，日誌太多的話，給不一樣種類的日誌設置不一樣的樣式，能夠極大的提高閱讀體驗。

什麼是 %c

%c: 標識將 CSS 樣式應用於 %c 以後的 console 消息。

給 console 消息設置多個樣式

能夠給同一條 Console 消息設置多種顏色。

console.log(
  'Nothing here %cHi Cat %cHey Bear',  // Console Message
  'color: blue', 'color: red' // CSS Style
);

給其餘 console 消息設置樣式

這裏有五種 console 類型的消息：

• console.log
• console.info
• console.debug
• console.warn
• console.error

你能夠自定義本身的日誌樣式，例如：

console.log('%cconsole.log', 'color: green;'); 
console.info('%cconsole.info', 'color: green;'); 
console.debug('%cconsole.debug', 'color: green;'); 
console.warn('%cconsole.warn', 'color: green;'); 
console.error('%cconsole.error', 'color: green;');

處理多種 CSS 樣式

若是要輸出的樣式比較多，字符串會比較長，這裏有一個小技巧， 生成一個 CSS Array ，經過 join(';') 來合併成一個 CSS String。

例如：

// 1.將css樣式傳遞給數組
const styles = [ 
  'color：green'，
  'background：yellow'，
  'font-size：30px'，
  'border：1px solid red'，
  'text-shadow：2px 2px black'，
  'padding：10px'，
]。join（';'）; // 2.鏈接單個數組項並將它們鏈接成一個用分號分隔的字符串（;）
// 3.傳遞樣式變量
console.log（'％cHello There'，styles）;
// or
console.log('%c%s', styles, 'Some Important Message Here');

在 Node.js 中設置 console 消息樣式

在 node.js 環境，你能夠使用 Color Reference 來設置樣式。例如：

// Cyan
console.log('\x1b[36m%s\x1b[0m', 'I am cyan');
// Yellow
console.log('\x1b[33m%s\x1b[0m', 'yellow' );

原文：  Colorful Console Message