Node.js在控制檯彩色輸出的方法及原理

本文首發於本人博客Node.js在控制檯彩色輸出的方法及原理，歡迎你們訪問😘

咱們都知道，在nodejs環境下使用普通的console.log,console.error,console.info輸出都是不會有顏色的，若是你不知道，那你如今知道啦😏。在這種狀況下，若是咱們須要彩色輸出，則一般經過chalk這個node模塊來實現，

chalk使用方法

基本用法

const chalk = require('chalk')
console.log(chalk.red.bold.bgWhite('Leo\'s Blog'))
複製代碼

上面代碼執行的結果以下，Leo's Blog 加粗，字體顏色是紅色，背景顏色是白色。

注意：背景顏色要在 bg 後面加上具體的顏色，顏色的第一個字母大寫。

在 HTML 中支持 RGB 顏色，在這裏一樣支持，並且是支持全部 HTML 中支持的顏色，如十六進制顏色。這裏僅僅說明十六進制顏色。

下面的代碼會和上面的代碼實現相同的效果。

const chalk = require('chalk')
console.log(chalk.rgb(255,0,0).bold.bgRgb(255,255,255)('Leo\'s Blog'))
複製代碼

使用模板

該模塊有一個很方便的用法就是支持模板輸出，也就是說，無論在字符串中的哪一個位置想改變輸出的顏色，都是能夠的。

const chalk = require('chalk')
console.log(chalk`{red.bold.bgWhite Leo\'s Blog}`)
複製代碼

固然，也能夠使用 RGB 顏色值。

const chalk = require('chalk')
console.log(chalk`{rgb(255,0,0).bold.bgRgb(255,255,255) Leo\'s Blog}`)
複製代碼

常見形式

咱們常常看到的警告、錯誤提示就是這麼來的

const chalk = require('chalk')

const error = chalk.bold.red;
const warning = chalk.keyword('orange')

console.log(error('Error!'))
console.log(warning('Warning!'))
複製代碼

經常使用API

樣式

• reset - 樣式重置
• bold - 加粗
• dim - 淺高亮
• italic - 斜體
• underline - 下劃線
• inverse- 反轉前景和背景色
• hidden - 隱藏內容
• strikethrough - 刪除線
• visible- 顯示chalk level > 0 的內容

前景色關鍵字（非全支持）

• black
• red
• green
• yellow
• blue
• magenta
• cyan
• white
• blackBright (alias: gray, grey)
• redBright
• greenBright
• yellowBright
• blueBright
• magentaBright
• cyanBright
• whiteBright

背景色關鍵字（非全支持）

• bgBlack
• bgRed
• bgGreen
• bgYellow
• bgBlue
• bgMagenta
• bgCyan
• bgWhite
• bgBlackBright (alias: bgGray, bgGrey)
• bgRedBright
• bgGreenBright
• bgYellowBright
• bgBlueBright
• bgMagentaBright
• bgCyanBright
• bgWhiteBright

更多API能夠看看官方文檔。

chalk讓控制檯輸出樣式多變的原理

其原理最重要的一個知識點就是ANSI Escape code.

ASCII編碼中有些字符是不能用來在終端中打印顯示的，好比'\a' 0x7表明響鈴，'\n' 0x0A表明換行，這些字符被稱爲控制符。

而其中的一個控制符 '\e' 0x1B比較特殊，這個字符表明 ESC ，即鍵盤上 ESC 按鍵的做用。ESC 是單詞 escape 的縮寫，即逃逸的意思。文本中出現這個控制符，表示接下來的字符是ANSI Escape code編碼。

而ANSI Escape code編碼中有專門控制字符顏色的控制符，例如：\e[31;44;4;1m

其意義以下：

• \e 表明開始ANSI Escape code
• [ 表明轉義序列開始符 CSI，Control Sequence Introducer
• 31;44;4;1 表明以; 分隔的文本樣式控制符，其中 31 表明文本前景色爲紅色，44表明背景爲藍色，4表明下劃線，1表明加粗
• m 表明結束控制符序列

咱們能夠在終端中輸入以下命令：

echo -e "\e[37;44;4;1mLEO\e[0m"
複製代碼

會有以下輸出，帶下劃線的LEO字樣：

由於 \e 控制符的16進制碼爲 0x1B ， 8 進制碼爲 033 ，也能夠用如下寫法達到一樣效果：

echo -e "\e[37;44;4;1mLEO\e[0m"
echo -e "\x1b[37;44;4;1mLEO\x1b[0m"
echo -e "\x1B[37;44;4;1mLEO\x1B[0m"
echo -e "\033[37;44;4;1mLEO\033[0m"
複製代碼

經過維基百科，我查到有如下參數控制符：

代碼	做用	備註
0	重置/正常	關閉全部屬性。
1	粗體或增長強度
2	弱化（下降強度）	未普遍支持。
3	斜體	未普遍支持。有時視爲反相顯示。
4	下劃線
5	緩慢閃爍	低於每分鐘150次。
6	快速閃爍	MS-DOS ANSI.SYS；每分鐘150以上；未普遍支持。
7	反顯	前景色與背景色交換。
8	隱藏	未普遍支持。
9	劃除	字符清晰，但標記爲刪除。未普遍支持。
10	主要（默認）字體
11–19	替代字體	選擇替代字體{\displaystyle n-10}{\displaystyle n-10}。
20	尖角體	幾乎無支持。
21	關閉粗體或雙下劃線	關閉粗體未普遍支持；雙下劃線幾乎無支持。
22	正常顏色或強度	不強不弱。
23	非斜體、非尖角體
24	關閉下劃線	去掉單雙下劃線。
25	關閉閃爍
27	關閉反顯
28	關閉隱藏
29	關閉劃除
30–37	設置前景色	參見下面的顏色表。
38	設置前景色	下一個參數是5;n或2;r;g;b，見下。
39	默認前景色	由具體實現定義（按照標準）。
40–47	設置背景色	參見下面的顏色表。
48	設置背景色	下一個參數是5;n或2;r;g;b，見下。
49	默認背景色	由具體實現定義（按照標準）。
51	Framed
52	Encircled
53	上劃線
54	Not framed or encircled
55	關閉上劃線
60	表意文字下劃線或右邊線	幾乎無支持。
61	表意文字雙下劃線或雙右邊線
62	表意文字上劃線或左邊線
63	表意文字雙上劃線或雙左邊線
64	表意文字着重標誌
65	表意文字屬性關閉	重置60–64的全部效果。
90–97	設置明亮的前景色	aixterm（非標準）。
100–107	設置明亮的背景色	aixterm（非標準）。

顏色編碼表以下：

名稱	前景色代碼	背景色代碼
黑	30	40
紅	31	41
綠	32	42
黃	33	43
藍	34	44
品紅	35	45
青	36	46
白	37	47
亮黑（灰）	90	100
亮紅	91	101
亮綠	92	102
亮黃	93	103
亮藍	94	104
亮品紅	95	105
亮青	96	106
亮白	97	107

示例：

\e[31m 紅色
\e[36;5;1;4m 緩慢閃爍的青色加粗帶下劃線字體
複製代碼