Node.js控制臺彩色輸出的方法與原理實例詳解
前言
我們都知道,在nodejs環(huán)境下使用普通的console.log,console.error,console.info輸出都是不會有顏色的,如果你不知道,那你現(xiàn)在知道啦😏。在這種情況下,如果我們需要彩色輸出,則通常通過chalk這個node模塊來實現(xiàn),
chalk使用方法
基本用法
const chalk = require('chalk')
console.log(chalk.red.bold.bgWhite('Leo\'s Blog'))
上面代碼執(zhí)行的結(jié)果如下,Leo's Blog 加粗,字體顏色是紅色,背景顏色是白色。
注意:背景顏色要在 bg 后面加上具體的顏色,顏色的第一個字母大寫。
在 HTML 中支持 RGB 顏色,在這里同樣支持,而且是支持所有 HTML 中支持的顏色,如十六進制顏色。這里僅僅說明十六進制顏色。
下面的代碼會和上面的代碼實現(xiàn)相同的效果。
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}`)
當(dāng)然,也可以使用 RGB 顏色值。
const chalk = require('chalk')
console.log(chalk`{rgb(255,0,0).bold.bgRgb(255,255,255) Leo\'s Blog}`)

四種方式的輸出
常見形式
我們經(jīng)??吹降木?、錯誤提示就是這么來的
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- 反轉(zhuǎn)前景和背景色
- hidden - 隱藏內(nèi)容
- strikethrough - 刪除線
- visible- 顯示chalk level > 0 的內(nèi)容
前景色關(guān)鍵字(非全支持)
- black
- red
- green
- yellow
- blue
- magenta
- cyan
- white
- blackBright (alias: gray, grey)
- redBright
- greenBright
- yellowBright
- blueBright
- magentaBright
- cyanBright
- whiteBright
背景色關(guān)鍵字(非全支持)
- 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 的縮寫,即逃逸的意思。文本中出現(xiàn)這個控制符,表示接下來的字符是ANSI Escape code編碼。
而ANSI Escape code編碼中有專門控制字符顏色的控制符,例如:\e[31;44;4;1m
其意義如下:
- \e 代表開始ANSI Escape code
- [ 代表轉(zhuǎn)義序列開始符 CSI,Control Sequence Introducer
- 31;44;4;1 代表以; 分隔的文本樣式控制符,其中 31 代表文本前景色為紅色,44代表背景為藍色,4代表下劃線,1代表加粗
- m 代表結(jié)束控制符序列
我們可以在終端中輸入如下命令:
echo -e "\e[37;44;4;1mLEO\e[0m"
會有如下輸出,帶下劃線的LEO字樣:

echo-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"

echo
通過維基百科,我查到有以下參數(shù)控制符:
| 代碼 | 作用 | 備注 |
|---|---|---|
| 0 | 重置/正常 | 關(guān)閉所有屬性。 |
| 1 | 粗體或增加強度 | |
| 2 | 弱化(降低強度) | 未廣泛支持。 |
| 3 | 斜體 | 未廣泛支持。有時視為反相顯示。 |
| 4 | 下劃線 | |
| 5 | 緩慢閃爍 | 低于每分鐘150次。 |
| 6 | 快速閃爍 | MS-DOS ANSI.SYS;每分鐘150以上;未廣泛支持。 |
| 7 | 反顯 | 前景色與背景色交換。 |
| 8 | 隱藏 | 未廣泛支持。 |
| 9 | 劃除 | 字符清晰,但標(biāo)記為刪除。未廣泛支持。 |
| 10 | 主要(默認)字體 | |
| 11–19 | 替代字體 | 選擇替代字體{\displaystyle n-10}{\displaystyle n-10}。 |
| 20 | 尖角體 | 幾乎無支持。 |
| 21 | 關(guān)閉粗體或雙下劃線 | 關(guān)閉粗體未廣泛支持;雙下劃線幾乎無支持。 |
| 22 | 正常顏色或強度 | 不強不弱。 |
| 23 | 非斜體、非尖角體 | |
| 24 | 關(guān)閉下劃線 | 去掉單雙下劃線。 |
| 25 | 關(guān)閉閃爍 | |
| 27 | 關(guān)閉反顯 | |
| 28 | 關(guān)閉隱藏 | |
| 29 | 關(guān)閉劃除 | |
| 30–37 | 設(shè)置前景色 | 參見下面的顏色表。 |
| 38 | 設(shè)置前景色 | 下一個參數(shù)是5;n或2;r;g;b,見下。 |
| 39 | 默認前景色 | 由具體實現(xiàn)定義(按照標(biāo)準(zhǔn))。 |
| 40–47 | 設(shè)置背景色 | 參見下面的顏色表。 |
| 48 | 設(shè)置背景色 | 下一個參數(shù)是5;n或2;r;g;b,見下。 |
| 49 | 默認背景色 | 由具體實現(xiàn)定義(按照標(biāo)準(zhǔn))。 |
| 51 | Framed | |
| 52 | Encircled | |
| 53 | 上劃線 | |
| 54 | Not framed or encircled | |
| 55 | 關(guān)閉上劃線 | |
| 60 | 表意文字下劃線或右邊線 | 幾乎無支持。 |
| 61 | 表意文字雙下劃線或雙右邊線 | |
| 62 | 表意文字上劃線或左邊線 | |
| 63 | 表意文字雙上劃線或雙左邊線 | |
| 64 | 表意文字著重標(biāo)志 | |
| 65 | 表意文字屬性關(guān)閉 | 重置60–64的所有效果。 |
| 90–97 | 設(shè)置明亮的前景色 | aixterm(非標(biāo)準(zhǔn))。 |
| 100–107 | 設(shè)置明亮的背景色 | aixterm(非標(biāo)準(zhǔn))。 |
顏色編碼表如下:
| 名稱 | 前景色代碼 | 背景色代碼 |
|---|---|---|
| 黑 | 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 緩慢閃爍的青色加粗帶下劃線字體
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對腳本之家的支持。
相關(guān)文章
node+vue實現(xiàn)用戶注冊和頭像上傳的實例代碼
本篇文章主要介紹了node+vue實現(xiàn)用戶注冊和頭像上傳的實例代碼,具有一定的參考價值,有興趣的可以了解一下2017-07-07
node命令行工具之實現(xiàn)項目工程自動初始化的標(biāo)準(zhǔn)流程
這篇文章主要介紹了node命令行工具之實現(xiàn)項目工程自動初始化的標(biāo)準(zhǔn)流程 ,本文分步驟給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
npm?list輸出結(jié)果包含extraneous標(biāo)志記錄分析
這篇文章主要為大家介紹了npm?list輸出結(jié)果包含extraneous標(biāo)志記錄分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01
node.js中g(shù)runt和gulp的區(qū)別詳解
這篇文章主要介紹了node.js中g(shù)runt和gulp的區(qū)別詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
nodejs使用PassThrough流進行數(shù)據(jù)傳遞合并示例詳解
這篇文章主要為大家介紹了nodejs使用PassThrough流進行數(shù)據(jù)傳遞合并示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09

