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 中支持的顏色,如十六進(jìn)制顏色。這里僅僅說明十六進(jìn)制顏色。
下面的代碼會和上面的代碼實現(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代表背景為藍(lán)色,4代表下劃線,1代表加粗
- m 代表結(jié)束控制符序列
我們可以在終端中輸入如下命令:
echo -e "\e[37;44;4;1mLEO\e[0m"
會有如下輸出,帶下劃線的LEO字樣:
echo-leo
因為 \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
通過維基百科,我查到有以下參數(shù)控制符:
代碼 | 作用 | 備注 |
---|---|---|
0 | 重置/正常 | 關(guān)閉所有屬性。 |
1 | 粗體或增加強度 | |
2 | 弱化(降低強度) | 未廣泛支持。 |
3 | 斜體 | 未廣泛支持。有時視為反相顯示。 |
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 | 尖角體 | 幾乎無支持。 |
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 | 默認(rèn)前景色 | 由具體實現(xiàn)定義(按照標(biāo)準(zhǔn))。 |
40–47 | 設(shè)置背景色 | 參見下面的顏色表。 |
48 | 設(shè)置背景色 | 下一個參數(shù)是5;n或2;r;g;b,見下。 |
49 | 默認(rèn)背景色 | 由具體實現(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 |
藍(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é)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對腳本之家的支持。
相關(guān)文章
node.js的exports、module.exports與ES6的export、export default深入詳解
這篇文章主要給大家介紹了關(guān)于node.js中的exports、module.exports與ES6中的export、export default到時是什么的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10使用Node.js腳本自動統(tǒng)計代碼量的實現(xiàn)代碼
手動統(tǒng)計代碼行數(shù)通常會耗費大量時間和精力,為了提高統(tǒng)計效率并減少人為錯誤,我們可以借助自動化工具來完成這項任務(wù),本文將介紹如何使用 Node.js 腳本來自動化統(tǒng)計項目代碼行數(shù),讓我們能夠輕松快捷地獲取項目的代碼量信息,需要的朋友可以參考下2023-12-12Node.js使用Express創(chuàng)建Web項目詳細(xì)教程
如果需要入門使用node.js進(jìn)行web開發(fā),正在學(xué)習(xí) nodejs web開發(fā)指南 的和想快速了解node.js web開發(fā)模式的朋友,相信本文是有一定幫助意義的。2017-03-03通過node-mysql搭建Windows+Node.js+MySQL環(huán)境的教程
這篇文章主要介紹了通過node-mysql搭建Windows+Node.js+MySQL環(huán)境的教程,node-mysql是JavaScript編寫的一個Node的MySQL驅(qū)動,需要的朋友可以參考下2016-03-03node.js使用zlib模塊進(jìn)行數(shù)據(jù)壓縮和解壓操作示例
這篇文章主要介紹了node.js使用zlib模塊進(jìn)行數(shù)據(jù)壓縮和解壓操作,結(jié)合實例形式詳細(xì)分析了node.js基于zlib模塊創(chuàng)建數(shù)據(jù)流以及壓縮和解壓縮等相關(guān)操作技巧,需要的朋友可以參考下2020-02-02