控制檯與終端輸出帶樣式文本原理及實現

在瀏覽器控制檯輸出帶樣式的文本

作爲一個前端，在瀏覽器控制檯輸出帶樣式的文本已經是手到擒來了，一個%c的佔位符就可以自定義後續文本的樣式。比如：

const style = 'font-weight: bold; font-size: 50px;color: red; text-shadow: 3px 3px 0 rgb(217,31,38) , 6px 6px 0 rgb(226,91,14) , 9px 9px 0 rgb(245,221,8) , 12px 12px 0 rgb(5,148,68) , 15px 15px 0 rgb(2,135,206) , 18px 18px 0 rgb(4,77,145) , 21px 21px 0 rgb(42,21,113)'
console.log('%c%s', style, '手到擒來')

那如何在命令行終端輸出帶樣式的文本呢

試着在windows的cmd窗口中輸入如下命令：

echo ^[[31m

這裏的 ^[ 是通過 ctrl+[ 組合鍵按出來的。這時候你會發現命令行後續的內容全都變成紅色了。再次輸入命令：

echo ^[[0m

這時候又會恢復成原色。

原因是轉義字符會被終端攔截，用來處理顏色和樣式。ASCII的顏色轉義碼的標準寫法是 轉義符 + [ + 數字 + m。這裏的數字可以是英文分號分隔的整數，如4;42就表示綠色背景+下劃線的轉義。0代表重置，會把前面所有的樣式清空。

如何在node環境中通過console.log輸出帶樣式的文本

上面終端的轉義字符只要使用escape的轉義字符就行。可以試試創建一個js文件test.js，代碼如下

console.log('測試\x1b[3;9;32m%s\x1b[31m文本\x1b[0m樣式', '終端')

輸出結果：

①代碼中%s是佔位符，代表後面的字符串

③ \x1b是轉義字符，\x表示十六進制，1b在ASCII碼錶中代表ESC鍵。如果你願意，可以把\x1b替換爲八進制\033，甚至是unicode字符\u001b。

④ 顏色轉義碼裏的數字可以是英文分號分隔的整數，如\x1b[3;9;32m就表示斜體+中劃線+綠色前景色的轉義。\x1b[0m是重置轉義符，會把前面所有的樣式清空。

第三方庫

誰都不想輸出個樣式這麼繁瑣，自然就有人幫忙封裝起來了。目前終端樣式美化的庫中star數最多的應該就是chalk了，看下chalk中轉義數字的映射文件：

const styles = {
		modifier: {
			reset: [0, 0],
			// 21 isn't widely supported and 22 does the same thing
			bold: [1, 22],
			dim: [2, 22],
			italic: [3, 23],
			underline: [4, 24],
			overline: [53, 55],
			inverse: [7, 27],
			hidden: [8, 28],
			strikethrough: [9, 29],
		},
		color: {
			black: [30, 39],
			red: [31, 39],
			green: [32, 39],
			yellow: [33, 39],
			blue: [34, 39],
			magenta: [35, 39],
			cyan: [36, 39],
			white: [37, 39],

			// Bright color
			blackBright: [90, 39],
			redBright: [91, 39],
			greenBright: [92, 39],
			yellowBright: [93, 39],
			blueBright: [94, 39],
			magentaBright: [95, 39],
			cyanBright: [96, 39],
			whiteBright: [97, 39],
		},
		bgColor: {
			bgBlack: [40, 49],
			bgRed: [41, 49],
			bgGreen: [42, 49],
			bgYellow: [43, 49],
			bgBlue: [44, 49],
			bgMagenta: [45, 49],
			bgCyan: [46, 49],
			bgWhite: [47, 49],

			// Bright color
			bgBlackBright: [100, 49],
			bgRedBright: [101, 49],
			bgGreenBright: [102, 49],
			bgYellowBright: [103, 49],
			bgBlueBright: [104, 49],
			bgMagentaBright: [105, 49],
			bgCyanBright: [106, 49],
			bgWhiteBright: [107, 49],
		},
	};

每個顏色都是一個只有倆元素的數組，第一個元素是當前樣式的轉義數字，第二個元素是清除該樣式的轉義數字

參考資料：ANSI Escape Codes