另类的终端输出：ANSI Escape code介绍

在之前的文章《preinstall: “npx only-allow pnpm”的解析》中我们在控制台终端看到这样的效果：

平时使用的时候在命令行终端中的内容通常会是黑底白字，但是有的时候我们会看到一些写的好的命令行工具，它们会输出各种的颜色的提示信息，尤其是绿色的Success与红色的Failed， 这对我们了解程序运行状态来说，有着很好的帮助。
这些特殊的符号到底是什么呢？终端中输出的有颜色的符号又是怎样设置的？接下来我们一起认识一下：ANSI转义代码(ansi escape code)

一、ANSI转义代码(ansi escape code)

ANSI转义代码(ansi escape code)是以\x1b[开头的，而ESC 转义字符在 ASCII 码中十进制是 27，十六进制是 0x1B。所以x1B的字面意思就是是ESC，这就是为什么叫做ansi escape code 。

常用的ansi escape code的语法看起如下：

\x1B + "[" + <zero or more numbers, separated by ";"> + <a letter>

加号将语法分为了几部分：

①\x1B 是ansi escape code开始的标准
② [ 是CSI (Control Sequence Introducer)
③中间部分的 <zero or more numbers, separated by “;”> 由0个或者多个数字组成，是函数的参数，多个参数之间由分号进行分割。
④<a letter> 是一个字母，是ansi escape code需要调用的函数名

那么\x1b[0;1;34m，可以这样理解：

① \x1b[ # call a CSI function
② 0;1;34 # function arguments (0, 1, 34)
③ m # function name

0;1;34m可以理解为m(0, 1, 34); 同理，\x1b[A 可以理解为: A()

二、可用的函数

上面介绍了ansi escape code的语法， 那还有那些函数可以使用呢？

	name	signature	description
A	Cursor Up	(n=1)	Move cursor up by n 【将光标向上移动n行】
B	Cursor Down	(n=1)	Move cursor down by n 【将光标向下移动n行】
C	Cursor Forward	(n=1)	Move cursor forward by n 【将光标向前移动n个字符】
D	Cursor Back	(n=1)	Move cursor back by n 【将光标向后移动n个字符】
E	Cursor Next Line	(n=1)	Move cursor to the beginning of the line n lines down【将光标向下移到到n行的行首】
F	Cursor Previous Line	(n=1)	Move cursor to the beginning of the line n lines up【将光标向上移到到n行的行首】
G	Cursor Horizontal Absolute	(n=1)	Move cursor to the the column nwithin the current row 【将光标移动到当前行中的第n列】
H	Cursor Position	(n=1, m=1)	Move cursor to row n, column m, counting from the top left corner
J	Erase in Display	(n=0)	Clear part of the screen. 0, 1, 2, and 3 have various specific functions
K	Erase in Line	(n=0)	Clear part of the line. 0, 1, and 2 have various specific functions
S	Scroll Up	(n=1)	Scroll window up by n lines 【将窗口向上滚动到n行】
T	Scroll Down	(n=1)	Scroll window down by n lines 【将窗口向下滚动到n行】
s	Save Cursor Position	()	Save current cursor position for use with u
u	Restore Cursor Position	()	Set cursor back to position last saved by s
f	…	…	(same as G)
m	SGR	(*)	Set graphics mode. More below

下面着重讲SGR(Set graphics mode)函数（m）:

SGR常见值说明：

value	name / description
0	Reset: turn off all attributes 【重置：关闭所有属性】
1	Bold (or bright, it’s up to the terminal and the user config to some extent) 【粗体】
3	Italic 【斜体】
4	Underline 【下划线】
30–37	Set text colour from the basic colour palette of 0–7 【从0-7的基本颜色板中设置文本颜色,即前景色】
38;5;n	Set text colour to index n in a 256-colour palette(e.g. \x1b[38;5;34m)【前景色】
38;2;r;g;b	Set text colour to an RGB value (e.g. \x1b[38;2;255;255;0m)【前景色】
40–47	Set background colour 【从0-7的基本颜色板中设置背景色】
48;5;n	Set background colour to index n in a 256-colour palette 【背景色】
48;2;r;g;b	Set background colour to an RGB value 【背景色】
90–97	Set text colour from the bright colour palette of 0–7
100–107	Set background colour from the bright

注：
①多个SGR参数可以使用另一个参数; 进行串联，它们将按照遇到的先后顺序依次进行应用。
例如：console.log('多个SGR参数串联：\x1b[31;47mHello World!\x1B[39;49m')，运行效果如下：

② 在其他参数之前看到0;尤其常见，以便在应用我们自己的参数之前重置状态。举个例子：
console.log('多个SGR参数串联：\x1b[31;47mHello World!\x1B[1;4;39;49m')，如果不使用0，也就是不在起始或末尾加上\x1b[0m，则会受之前样式影响，或者影响之后字符显示的样式：

上面的表格中30–37，40–47说的基本颜色面板，为了直观的预览颜色字符的效果，我们写一段代码运行看看：

var styles = {
  'bold'          : ['\x1B[1m',  '\x1B[22m'],
  'italic'        : ['\x1B[3m',  '\x1B[23m'],
  'underline'     : ['\x1B[4m',  '\x1B[24m'],
  'inverse'       : ['\x1B[7m',  '\x1B[27m'],
  'strikethrough' : ['\x1B[9m',  '\x1B[29m'],
  'grey'          : ['\x1B[90m', '\x1B[39m'],
  'greyBG'        : ['\x1B[100m', '\x1B[49m'],

  'black'         : ['\x1B[30m', '\x1B[39m'],
  'red'           : ['\x1B[31m', '\x1B[39m'],
  'green'         : ['\x1B[32m', '\x1B[39m'],
  'yellow'        : ['\x1B[33m', '\x1B[39m'],
  'blue'          : ['\x1B[34m', '\x1B[39m'],
  'magenta'       : ['\x1B[35m', '\x1B[39m'],
  'cyan'          : ['\x1B[36m', '\x1B[39m'],
  'white'         : ['\x1B[37m', '\x1B[39m'],

  'blackBG'       : ['\x1B[40m', '\x1B[49m'],
  'redBG'         : ['\x1B[41m', '\x1B[49m'],
  'greenBG'       : ['\x1B[42m', '\x1B[49m'],
  'yellowBG'      : ['\x1B[43m', '\x1B[49m'],
  'blueBG'        : ['\x1B[44m', '\x1B[49m'],
  'magentaBG'     : ['\x1B[45m', '\x1B[49m'],
  'cyanBG'        : ['\x1B[46m', '\x1B[49m'],
  'whiteBG'       : ['\x1B[47m', '\x1B[49m'],

}

function log (key, obj) {
  console.log(styles[key][0] + '%s' + styles[key][1], obj)
}

Object.keys(styles).forEach(k => {
  log(k, `${k}: Hello World!`)
})               

运行结果：

30–37，40–47的颜色，我们可以根据其个位上的数字进行分类，代表不同的重要性及意义的信息：

数字	说明
0（黑色）	这是我们在写代码的时候最常用的默认值，一般不会单独设置这个
1（红色）	红色通常是严重的错误，所以重要性最高，因此是第1个
2（绿色）	绿色通常是重要的成功，所以重要性次高，因此是第2个
3（黄色）	用于告警。 后面的几个颜色重要性依次递减
7（白色）	白色同黑色一样很少专门使用，因为他们又可能会和前景色或者背景色重合导致界面无法阅读