【3分钟技能get】逼格满满的控制台彩色输出

学这个能装逼？

相信大多数前端童鞋，在工程构建或者node服务启动时，或多或少会在控制台看到一些彩色输出，在满屏黑白中给人眼前一亮的感觉~
下面就是一个git提交信息校验插件的控制台信息输出：

一般情况下，控制台输出信息会非常多，想要找到关键信息会比较麻烦。可以看到上例，彩色输出能够帮助使用者对当前执行进度以及状态一目了然。
如果在构建过程或给自己写的插件增加格式输出，是不是很酷~

怎么实现的呢？

归功于转义序列(escape sequences)，终端不仅能够输出黑色，同样支持输出带颜色和格式化的文本。由于要区分普通输出内容，因此需要特殊的转义字符进行标识：“<Esc>[FormatCodem” ：

• Esc在bash环境，可以使用如下方式表示：

//不同字符集编码表现不同，这里展示部分
\033  //Esc的8进制表示
\x1B  //Esc的16进制表示

\e   //Bash提供的插入转义字符的方便方法,window的shell不支持。

• _FormatCode_表示对文本进行何种格式化的编码；

Examples：

注意：

1. -e 是echo命令的参数，表示开启解析转义序列；
2. \e[0m序列用于删除设置的所有格式和颜色；可以理解为对文本格式处理的结束符，避免影响后面的文本；
3. 上面的例子使用的是Bash环境输出，其实几乎所有的编程语言都支持转义序列。比如文章开头的例子，使用的便是console.log()方式输出。

下例中具体格式编码见参考，使用node环境。

栗子1：改变文本颜色：

console.log('normal \033[34m text \033[0m normal');

\033[34m：表示对接下来的文本进行格式处理；34表示字体使用蓝色；
\033[0m：同样是转义标识，0标识清除前面设置的格式，不影响后面的输出。
效果展示：

栗子2：增加背景色：

console.log('normal \033[42m background \033[0m normal');

code为42对应绿色背景。
效果展示：

栗子3：渐变色的实现

支持256色，此时转义格式变为："<Esc>[38;5;ColorNumberm"

let str = '';
for(let i = 16; i < 22; i++) {
    str += '\033[38;5;'+i+'m#\033[0m';
}
for(let i = 21; i > 15; i--) {
    str += '\033[38;5;'+i+'m#\033[0m';
}
console.log(str);

效果展示：

栗子4：组合使用

console.log('\033[1;31;42m Yes it is cool \033[0m \033[4mUnderlined\033[0m');

效果展示：

好了，这些已经满足一般的控制台装逼提示需求，不妨尝试下~

---

更多技术分享及时获取，欢迎【扫码关注】~

参考：https://misc.flogisoft.com/ba...