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代表背景為藍(lán)色，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ù)控制符：

顏色編碼表如下：

示例：

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

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對億速云的支持。