Node.js 中有不少常用的 Color 模塊，例如 chalk 、 colors.js 、 cli-color 等，通過(guò)這些模塊我們輸出各種帶顏色、方面區(qū)分或者更酷的日志以及 CLI 工具提示。那么今天帶大家簡(jiǎn)單了解一下 Color 模塊的實(shí)現(xiàn)。

ANSI escape code

與前端上對(duì)元素內(nèi)的文字加上了 CSS 修飾一樣。terminal 中輸出的文字包含顏色也是因?yàn)槲淖值臄?shù)據(jù)跟隨了顏色描述的數(shù)據(jù)。而要了解 terminal 上的顏色，首先需要了解 ANSI escape code

。

顏色修飾數(shù)據(jù)對(duì)于 terminal 而言，是跟 " \n " 類(lèi)似的讓顯示出現(xiàn)變化的一種轉(zhuǎn)義字符。與常見(jiàn)的轉(zhuǎn)義字符不同，修飾顏色字符（在大部分平臺(tái)上）按照 CSI codes 的格式以 " ESC " + " [ " 字符開(kāi)頭，形如： ESC[ + code1;code2;...;codeN + m 結(jié)束（其中的 code 即修飾顏色的數(shù)據(jù)）。例如：

echo -e "\033[31;42mhello"; # 控制字符[紅色文字;綠色背景結(jié)束符號(hào)hello
echo -e "\033[0m";          # 重置顏色修飾
echo -e "\033[33mworld";    # 控制字符[黃色文字結(jié)束符號(hào)world
echo -e "\033[0m";          # 重置顏色修飾

各位用戶(hù)（win除外）可以在 terminal 上嘗試一下執(zhí)行效果，或者使用 Node.js （包括win）運(yùn)行以下代碼試試：

console.log("\033[31;42mhello"); //  控制字符[紅色文字;綠色背景結(jié)束符號(hào)hello
console.log("\033[0m");          //  重置顏色修飾
console.log("\033[33mworld");    //  控制字符[黃色文字結(jié)束符號(hào)world
console.log("\033[0m");          //  重置顏色修飾

執(zhí)行效果：

注意：ESC 轉(zhuǎn)義字符在 ASCII 碼中十進(jìn)制是 27，八進(jìn)制是 033，十六進(jìn)制是 0x1B。所以在 Node.js 中除了 \033 之外還可以寫(xiě)成 \u001b （嚴(yán)格模式強(qiáng)制）。

ANSI colors and styles

ANSI 的標(biāo)準(zhǔn)中，特定的 code 表示特定的含義，對(duì)于 terminal 的顏色主要有三方面的定義。分別是樣式、顏色、明亮度。

樣式

常見(jiàn)的字體樣式分別是（支持情況視 terminal 而定）：

顏色 & 明亮

code 30 - 37 為字體顏色，91 - 97 為字體顏色的明亮版。40 - 47 為背景色，100 - 107 為背景色的明亮版。terminal 的默認(rèn)字體色 code 是 39，默認(rèn)背景色是 49。

完整的 code 信息參見(jiàn) CSI codes 中的 SGR (Select Graphic Rendition) parameters。

Color 模塊實(shí)現(xiàn)

了解了 ANSI 編碼中關(guān)于顏色部分的知識(shí)之后，在 Node.js 中實(shí)現(xiàn)一個(gè)顏色模塊就很簡(jiǎn)單了。

首先我們可以明確一點(diǎn)，跟某段輸出的內(nèi)容加上顏色，其實(shí)要做的事情就是將該內(nèi)容使用修飾顏色的數(shù)據(jù)包起來(lái)即可。例如輸出一段綠底紅字，相當(dāng)于輸出 “綠色背景紅色文字修飾數(shù)據(jù)” + “輸出文字” + “重置修飾”。其效果可以簡(jiǎn)單這樣寫(xiě)：

function getRedTextGreenBg(text) {
  return '\033[31;42m' + text + '\033[0m';
}

console.log(getRedTextGreenBg('hello world'));

如果了解 CSI codes 的規(guī)則就會(huì)發(fā)現(xiàn)，對(duì)于顏色數(shù)據(jù) ESC[ + code1;code2;...;codeN + m 的寫(xiě)法其實(shí)和 ESC[ + code1 + m + ESC[ + code2 + m + ... + ESC[ + codeN + m 的效果是一樣的，目前 Node.js 中大部分 Color 模塊都是按照后者的情況來(lái)實(shí)現(xiàn)的。

完整一點(diǎn)的 styles 數(shù)據(jù)可以參考 chalk 的 ansi-styles 。那么我這邊換個(gè)簡(jiǎn)單的思路模仿 chalk 的調(diào)用方式來(lái)實(shí)現(xiàn)一版，供各位大佬圍觀：

'use strict';

// 嚴(yán)格模式要用 unicode 的十六進(jìn)制不能用八進(jìn)制的 \033
const styles = {
  // style:    [ style code, reset code  ]
  'bold':      ['\u001b[1m', '\u001b[22m'],
  // ...
  'black':     ['\u001b[30m', '\u001b[39m'],
  'red':       ['\u001b[31m', '\u001b[39m'],
  'green':     ['\u001b[32m', '\u001b[39m'],
  'yellow':    ['\u001b[33m', '\u001b[39m'],
  // ...
  'bgBlack':   ['\u001b[40m', '\u001b[49m'],
  'bgRed':     ['\u001b[41m', '\u001b[49m'],
  'bgGreen':   ['\u001b[42m', '\u001b[49m'],
  'bgYellow':  ['\u001b[43m', '\u001b[49m'],
  // ...
};

const color = {};

Object.keys(styles).map((key) => 
  color[key] = (text) => 
    styles[key][0] + text + styles[key][1]);

console.log(
  color.bgGreen(color.red('hello,')) + 
  color.yellow(' world!'));

執(zhí)行效果：

 

來(lái)自：https://zhuanlan.zhihu.com/p/27308276

 

標(biāo)簽： b2b 代碼

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。