Node.js控制臺(tái)彩色輸出的方法與原理實(shí)例詳解
前言
我們都知道,在nodejs環(huán)境下使用普通的console.log,console.error,console.info輸出都是不會(huì)有顏色的,如果你不知道,那你現(xiàn)在知道啦😏。在這種情況下,如果我們需要彩色輸出,則通常通過(guò)chalk這個(gè)node模塊來(lái)實(shí)現(xiàn),
chalk使用方法
基本用法
const chalk = require('chalk') console.log(chalk.red.bold.bgWhite('Leo\'s Blog'))
上面代碼執(zhí)行的結(jié)果如下,Leo's Blog 加粗,字體顏色是紅色,背景顏色是白色。
注意:背景顏色要在 bg 后面加上具體的顏色,顏色的第一個(gè)字母大寫。
在 HTML 中支持 RGB 顏色,在這里同樣支持,而且是支持所有 HTML 中支持的顏色,如十六進(jìn)制顏色。這里僅僅說(shuō)明十六進(jìn)制顏色。
下面的代碼會(huì)和上面的代碼實(shí)現(xiàn)相同的效果。
const chalk = require('chalk') console.log(chalk.rgb(255,0,0).bold.bgRgb(255,255,255)('Leo\'s Blog'))
使用模板
該模塊有一個(gè)很方便的用法就是支持模板輸出,也就是說(shuō),不管在字符串中的哪個(gè)位置想改變輸出的顏色,都是可以的。
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}`)
四種方式的輸出
常見(jiàn)形式
我們經(jīng)常看到的警告、錯(cuò)誤提示就是這么來(lái)的
const chalk = require('chalk') const error = chalk.bold.red; const warning = chalk.keyword('orange') console.log(error('Error!')) console.log(warning('Warning!'))
錯(cuò)誤和警告提示
常用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讓控制臺(tái)輸出樣式多變的原理
其原理最重要的一個(gè)知識(shí)點(diǎn)就是ANSI Escape code.
ASCII編碼中有些字符是不能用來(lái)在終端中打印顯示的,比如'\a' 0x7代表響鈴,'\n' 0x0A代表?yè)Q行,這些字符被稱為控制符。
而其中的一個(gè)控制符 '\e' 0x1B比較特殊,這個(gè)字符代表 ESC ,即鍵盤上 ESC 按鍵的作用。ESC 是單詞 escape 的縮寫,即逃逸的意思。文本中出現(xiàn)這個(gè)控制符,表示接下來(lái)的字符是ANSI Escape code編碼。
而ANSI Escape code編碼中有專門控制字符顏色的控制符,例如:\e[31;44;4;1m
其意義如下:
- \e 代表開(kāi)始ANSI Escape code
- [ 代表轉(zhuǎn)義序列開(kāi)始符 CSI,Control Sequence Introducer
- 31;44;4;1 代表以; 分隔的文本樣式控制符,其中 31 代表文本前景色為紅色,44代表背景為藍(lán)色,4代表下劃線,1代表加粗
- m 代表結(jié)束控制符序列
我們可以在終端中輸入如下命令:
echo -e "\e[37;44;4;1mLEO\e[0m"
會(huì)有如下輸出,帶下劃線的LEO字樣:
echo-leo
因?yàn)?\e 控制符的16進(jìn)制碼為 0x1B , 8 進(jìn)制碼為 033 ,也可以用以下寫法達(dá)到同樣效果:
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
通過(guò)維基百科,我查到有以下參數(shù)控制符:
代碼 | 作用 | 備注 |
---|---|---|
0 | 重置/正常 | 關(guān)閉所有屬性。 |
1 | 粗體或增加強(qiáng)度 | |
2 | 弱化(降低強(qiáng)度) | 未廣泛支持。 |
3 | 斜體 | 未廣泛支持。有時(shí)視為反相顯示。 |
4 | 下劃線 | |
5 | 緩慢閃爍 | 低于每分鐘150次。 |
6 | 快速閃爍 | MS-DOS ANSI.SYS;每分鐘150以上;未廣泛支持。 |
7 | 反顯 | 前景色與背景色交換。 |
8 | 隱藏 | 未廣泛支持。 |
9 | 劃除 | 字符清晰,但標(biāo)記為刪除。未廣泛支持。 |
10 | 主要(默認(rèn))字體 | |
11–19 | 替代字體 | 選擇替代字體{\displaystyle n-10}{\displaystyle n-10}。 |
20 | 尖角體 | 幾乎無(wú)支持。 |
21 | 關(guān)閉粗體或雙下劃線 | 關(guān)閉粗體未廣泛支持;雙下劃線幾乎無(wú)支持。 |
22 | 正常顏色或強(qiáng)度 | 不強(qiáng)不弱。 |
23 | 非斜體、非尖角體 | |
24 | 關(guān)閉下劃線 | 去掉單雙下劃線。 |
25 | 關(guān)閉閃爍 | |
27 | 關(guān)閉反顯 | |
28 | 關(guān)閉隱藏 | |
29 | 關(guān)閉劃除 | |
30–37 | 設(shè)置前景色 | 參見(jiàn)下面的顏色表。 |
38 | 設(shè)置前景色 | 下一個(gè)參數(shù)是5;n或2;r;g;b,見(jiàn)下。 |
39 | 默認(rèn)前景色 | 由具體實(shí)現(xiàn)定義(按照標(biāo)準(zhǔn))。 |
40–47 | 設(shè)置背景色 | 參見(jiàn)下面的顏色表。 |
48 | 設(shè)置背景色 | 下一個(gè)參數(shù)是5;n或2;r;g;b,見(jiàn)下。 |
49 | 默認(rèn)背景色 | 由具體實(shí)現(xiàn)定義(按照標(biāo)準(zhǔn))。 |
51 | Framed | |
52 | Encircled | |
53 | 上劃線 | |
54 | Not framed or encircled | |
55 | 關(guān)閉上劃線 | |
60 | 表意文字下劃線或右邊線 | 幾乎無(wú)支持。 |
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 |
藍(lán) | 34 | 44 |
品紅 | 35 | 45 |
青 | 36 | 46 |
白 | 37 | 47 |
亮黑(灰) | 90 | 100 |
亮紅 | 91 | 101 |
亮綠 | 92 | 102 |
亮黃 | 93 | 103 |
亮藍(lán) | 94 | 104 |
亮品紅 | 95 | 105 |
亮青 | 96 | 106 |
亮白 | 97 | 107 |
示例:
\e[31m 紅色 \e[36;5;1;4m 緩慢閃爍的青色加粗帶下劃線字體
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
node.js的exports、module.exports與ES6的export、export default深入詳解
這篇文章主要給大家介紹了關(guān)于node.js中的exports、module.exports與ES6中的export、export default到時(shí)是什么的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10使用Node.js腳本自動(dòng)統(tǒng)計(jì)代碼量的實(shí)現(xiàn)代碼
手動(dòng)統(tǒng)計(jì)代碼行數(shù)通常會(huì)耗費(fèi)大量時(shí)間和精力,為了提高統(tǒng)計(jì)效率并減少人為錯(cuò)誤,我們可以借助自動(dòng)化工具來(lái)完成這項(xiàng)任務(wù),本文將介紹如何使用 Node.js 腳本來(lái)自動(dòng)化統(tǒng)計(jì)項(xiàng)目代碼行數(shù),讓我們能夠輕松快捷地獲取項(xiàng)目的代碼量信息,需要的朋友可以參考下2023-12-12Node.js使用Express創(chuàng)建Web項(xiàng)目詳細(xì)教程
如果需要入門使用node.js進(jìn)行web開(kāi)發(fā),正在學(xué)習(xí) nodejs web開(kāi)發(fā)指南 的和想快速了解node.js web開(kāi)發(fā)模式的朋友,相信本文是有一定幫助意義的。2017-03-03通過(guò)node-mysql搭建Windows+Node.js+MySQL環(huán)境的教程
這篇文章主要介紹了通過(guò)node-mysql搭建Windows+Node.js+MySQL環(huán)境的教程,node-mysql是JavaScript編寫的一個(gè)Node的MySQL驅(qū)動(dòng),需要的朋友可以參考下2016-03-03node.js中的fs.closeSync方法使用說(shuō)明
這篇文章主要介紹了node.js中的fs.closeSync方法使用說(shuō)明,本文介紹了fs.closeSync方法說(shuō)明、語(yǔ)法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12Node.js實(shí)現(xiàn)簡(jiǎn)單管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了Node.js實(shí)現(xiàn)簡(jiǎn)單管理系統(tǒng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09Node.js測(cè)試中的Mock文件系統(tǒng)詳解
相信大家應(yīng)該都知道在Node.js測(cè)試中,常常會(huì)需要構(gòu)造某種項(xiàng)目目錄。 為每個(gè)測(cè)試用例添加相應(yīng)的目錄結(jié)構(gòu)既費(fèi)時(shí)又難以維護(hù)。那么這個(gè)時(shí)候Mock文件系統(tǒng)就派上用場(chǎng)了,下面這篇文章詳細(xì)的介紹了Mock文件系統(tǒng),有需要的朋友們可以參考借鑒,下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11Node.js16.15.1的一個(gè)報(bào)錯(cuò)以及解決方案分享
這篇文章主要給大家介紹了關(guān)于Node.js16.15.1的一個(gè)報(bào)錯(cuò)以及解決方案的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-12-12node.js使用zlib模塊進(jìn)行數(shù)據(jù)壓縮和解壓操作示例
這篇文章主要介紹了node.js使用zlib模塊進(jìn)行數(shù)據(jù)壓縮和解壓操作,結(jié)合實(shí)例形式詳細(xì)分析了node.js基于zlib模塊創(chuàng)建數(shù)據(jù)流以及壓縮和解壓縮等相關(guān)操作技巧,需要的朋友可以參考下2020-02-02