Node.js控制台彩色输出的方法与原理实例详解


Posted in Javascript onDecember 01, 2019

前言

我们都知道,在nodejs环境下使用普通的console.log,console.error,console.info输出都是不会有颜色的,如果你不知道,那你现在知道啦?。在这种情况下,如果我们需要彩色输出,则通常通过chalk这个node模块来实现,

chalk使用方法

基本用法

const chalk = require('chalk')
console.log(chalk.red.bold.bgWhite('Leo\'s Blog'))

上面代码执行的结果如下,Leo's Blog 加粗,字体颜色是红色,背景颜色是白色。

注意:背景颜色要在 bg 后面加上具体的颜色,颜色的第一个字母大写。

在 HTML 中支持 RGB 颜色,在这里同样支持,而且是支持所有 HTML 中支持的颜色,如十六进制颜色。这里仅仅说明十六进制颜色。

下面的代码会和上面的代码实现相同的效果。

const chalk = require('chalk')
console.log(chalk.rgb(255,0,0).bold.bgRgb(255,255,255)('Leo\'s Blog'))

使用模板

该模块有一个很方便的用法就是支持模板输出,也就是说,不管在字符串中的哪个位置想改变输出的颜色,都是可以的。

const chalk = require('chalk')
console.log(chalk`{red.bold.bgWhite Leo\'s Blog}`)

当然,也可以使用 RGB 颜色值。

const chalk = require('chalk')
console.log(chalk`{rgb(255,0,0).bold.bgRgb(255,255,255) Leo\'s Blog}`)

Node.js控制台彩色输出的方法与原理实例详解
四种方式的输出

常见形式

我们经常看到的警告、错误提示就是这么来的

const chalk = require('chalk')

const error = chalk.bold.red;
const warning = chalk.keyword('orange')

console.log(error('Error!'))
console.log(warning('Warning!'))

Node.js控制台彩色输出的方法与原理实例详解
错误和警告提示

常用API

样式

  • reset - 样式重置
  • bold - 加粗
  • dim - 浅高亮
  • italic - 斜体
  • underline - 下划线
  • inverse- 反转前景和背景色
  • hidden - 隐藏内容
  • strikethrough - 删除线
  • visible- 显示chalk level > 0 的内容

前景色关键字(非全支持)

  • black
  • red
  • green
  • yellow
  • blue
  • magenta
  • cyan
  • white
  • blackBright (alias: gray, grey)
  • redBright
  • greenBright
  • yellowBright
  • blueBright
  • magentaBright
  • cyanBright
  • whiteBright

背景色关键字(非全支持)

  • bgBlack
  • bgRed
  • bgGreen
  • bgYellow
  • bgBlue
  • bgMagenta
  • bgCyan
  • bgWhite
  • bgBlackBright (alias: bgGray, bgGrey)
  • bgRedBright
  • bgGreenBright
  • bgYellowBright
  • bgBlueBright
  • bgMagentaBright
  • bgCyanBright
  • bgWhiteBright

更多API可以看看官方文档。

chalk让控制台输出样式多变的原理

其原理最重要的一个知识点就是ANSI Escape code.

ASCII编码中有些字符是不能用来在终端中打印显示的,比如'\a' 0x7代表响铃,'\n' 0x0A代表换行,这些字符被称为控制符。

而其中的一个控制符 '\e' 0x1B比较特殊,这个字符代表 ESC ,即键盘上 ESC 按键的作用。ESC 是单词 escape 的缩写,即逃逸的意思。文本中出现这个控制符,表示接下来的字符是ANSI Escape code编码。

而ANSI Escape code编码中有专门控制字符颜色的控制符,例如:\e[31;44;4;1m

其意义如下:

  • \e 代表开始ANSI Escape code
  • [ 代表转义序列开始符 CSI,Control Sequence Introducer
  • 31;44;4;1 代表以; 分隔的文本样式控制符,其中 31 代表文本前景色为红色,44代表背景为蓝色,4代表下划线,1代表加粗
  • m 代表结束控制符序列

我们可以在终端中输入如下命令:

echo -e "\e[37;44;4;1mLEO\e[0m"

会有如下输出,带下划线的LEO字样:

Node.js控制台彩色输出的方法与原理实例详解
echo-leo

因为 \e 控制符的16进制码为 0x1B , 8 进制码为 033 ,也可以用以下写法达到同样效果:

echo -e "\e[37;44;4;1mLEO\e[0m"
echo -e "\x1b[37;44;4;1mLEO\x1b[0m"
echo -e "\x1B[37;44;4;1mLEO\x1B[0m"
echo -e "\033[37;44;4;1mLEO\033[0m"

Node.js控制台彩色输出的方法与原理实例详解
echo

通过维基百科,我查到有以下参数控制符:

代码 作用 备注
0 重置/正常 关闭所有属性。
1 粗体或增加强度
2 弱化(降低强度) 未广泛支持。
3 斜体 未广泛支持。有时视为反相显示。
4 下划线
5 缓慢闪烁 低于每分钟150次。
6 快速闪烁 MS-DOS ANSI.SYS;每分钟150以上;未广泛支持。
7 反显 前景色与背景色交换。
8 隐藏 未广泛支持。
9 划除 字符清晰,但标记为删除。未广泛支持。
10 主要(默认)字体
11?19 替代字体 选择替代字体{\displaystyle n-10}{\displaystyle n-10}。
20 尖角体 几乎无支持。
21 关闭粗体或双下划线 关闭粗体未广泛支持;双下划线几乎无支持。
22 正常颜色或强度 不强不弱。
23 非斜体、非尖角体
24 关闭下划线 去掉单双下划线。
25 关闭闪烁
27 关闭反显
28 关闭隐藏
29 关闭划除
30?37 设置前景色 参见下面的颜色表。
38 设置前景色 下一个参数是5;n或2;r;g;b,见下。
39 默认前景色 由具体实现定义(按照标准)。
40?47 设置背景色 参见下面的颜色表。
48 设置背景色 下一个参数是5;n或2;r;g;b,见下。
49 默认背景色 由具体实现定义(按照标准)。
51 Framed
52 Encircled
53 上划线
54 Not framed or encircled
55 关闭上划线
60 表意文字下划线或右边线 几乎无支持。
61 表意文字双下划线或双右边线
62 表意文字上划线或左边线
63 表意文字双上划线或双左边线
64 表意文字着重标志
65 表意文字属性关闭 重置60?64的所有效果。
90?97 设置明亮的前景色 aixterm(非标准)。
100?107 设置明亮的背景色 aixterm(非标准)。

颜色编码表如下:

名称 前景色代码 背景色代码
30 40
31 41
绿 32 42
33 43
34 44
品红 35 45
36 46
37 47
亮黑(灰) 90 100
亮红 91 101
亮绿 92 102
亮黄 93 103
亮蓝 94 104
亮品红 95 105
亮青 96 106
亮白 97 107

示例:

\e[31m 红色
\e[36;5;1;4m 缓慢闪烁的青色加粗带下划线字体

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
JS获取当前日期和时间的简单实例
Nov 19 Javascript
JavaScript弹出对话框的三种方式
Mar 23 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
CocosCreator入门教程之网络通信
Apr 16 Javascript
vue多个元素的样式选择器问题
Nov 29 #Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 #Javascript
vue 组件开发原理与实现方法详解
Nov 29 #Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 #Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 #Javascript
js中关于Blob对象的介绍与使用
Nov 29 #Javascript
js blob类型url的视频下载问题的解决
Nov 29 #Javascript
You might like
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
PHP parse_url 一个好用的函数
2009/10/03 PHP
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
actionscript与javascript的区别
2011/05/25 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
python如何生成各种随机分布图
2018/08/27 Python
实例讲解python中的序列化知识点
2018/10/08 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
python常用排序算法的实现代码
2019/11/08 Python
秘书专业自荐信范文
2013/12/26 职场文书
班级文化建设标语
2014/06/23 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书