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

夜暮sky

学这个能装逼?

相信大多数前端童鞋,在工程构建或者node服务启动时,或多或少会在控制台看到一些彩色输出,在满屏黑白中给人眼前一亮的感觉~
下面就是一个git提交信息校验插件的控制台信息输出:
image.png
一般情况下,控制台输出信息会非常多,想要找到关键信息会比较麻烦。可以看到上例,彩色输出能够帮助使用者对当前执行进度以及状态一目了然。
如果在构建过程或给自己写的插件增加格式输出,是不是很酷~

怎么实现的呢?

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

  • Esc在bash环境,可以使用如下方式表示:
//不同字符集编码表现不同,这里展示部分
\033  //Esc的8进制表示
\x1B  //Esc的16进制表示

\e   //Bash提供的插入转义字符的方便方法,window的shell不支持。
  • _FormatCode_表示对文本进行何种格式化的编码;

Examples:
image.png
注意:

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

image.png
下例中具体格式编码见参考,使用node环境。

栗子1:改变文本颜色:

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

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

栗子2:增加背景色:

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

code为42对应绿色背景。
效果展示:
image.png

栗子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);

效果展示:
image.png

栗子4:组合使用

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

效果展示:
image.png

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


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


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

阅读 315

前端事务所
欢迎关注wx公众号:前端事务所我们专注帮助前端童鞋提升个人技能,分享技术干货,欢迎一起交流~
36 声望
2 粉丝
0 条评论
36 声望
2 粉丝
宣传栏