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

前言

我们都知道,在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}`)


四种方式的输出

常见形式

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

const chalk = require('chalk')

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

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


错误和警告提示

常用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字样:


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"


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 缓慢闪烁的青色加粗带下划线字体

总结

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

(0)

相关推荐

  • Node.js中Koa2在控制台输出请求日志的方法示例

    前言 Koa2真的是个很轻量的框架,轻量到路由都作为了模块单独了出来,Koa2也没有日志功能,如果我们需要有一些请求的日志和时间,我们就需要引入日志中间件 下面话不多说了,来一起看看详细的介绍吧 引入时间格式化库MomentJS 安装MomentJS npm install moment --save 简单格式化时间 使用YYYY-MM-DD HH:MM:SS代表 年-月-日 时-分-秒(24小时制) console.log(Moment().format('YYYY-MM-DD HH:MM:S

  • Node.js console控制台简单用法分析

    本文实例讲述了Node.js console控制台简单用法.分享给大家供大家参考,具体如下: 在Node.js官方文档 https://nodejs.org/api/console.html 中描述了控制台的所有API方法. Class: Console  - new Console(stdout[, stderr])  - console.assert(value[, message][, ...])  - console.dir(obj[, options])  - console.erro

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

    前言 我们都知道,在nodejs环境下使用普通的console.log,console.error,console.info输出都是不会有颜色的,如果你不知道,那你现在知道啦

  • Node.js基础入门之缓存区与文件操作详解

    目录 缓存区 1. 什么是缓存区? 2. 创建指定长度的缓存区 3. 通过数组创建缓存区 4. 通过字符串创建缓存区 5. 读写缓存区 6. 复制缓存区 文件操作 1. 异步直接读取 2. 同步直接读取 3. 流式读取 4. 写入文件 5. 流式写入文件 6. 读取文件信息 7. 删除文件 8. 管道 9. 链式流 经过前面三天的学习,Node.js的基础知识已逐渐掌握,今天继续学习缓存区和文件操作,并稍加整理加以分享,如有不足之处,还请指正. 缓存区 1. 什么是缓存区? JavaScript

  • Node.js高级编程cluster环境及源码调试详解

    目录 前言 准备调试环境 编译 Node.js 准备 IDE 环境 Cluster 源码调试 SharedHandle RoundRobinHandle 为什么端口不冲突 SO_REUSEADDR 补充 SharedHandle 和 RoundRobinHandle 两种模式的对比 前言 日常工作中,对 Node.js 的使用都比较粗浅,趁未羊之际,来学点稍微高级的,那就先从 cluster 开始吧. 尼古拉斯张三说过,“带着问题去学习是一个比较好的方法”,所以我们也来试一试. 当初使用 clu

  • Java使用agent实现main方法之前的实例详解

    Java使用agent实现main方法之前的实例详解 创建Agent项目 PreMainExecutor 类,在main方法之前执行此方法 public class PreMainExecutor { public static void premain(String agentOps, Instrumentation inst){ System.out.println("premain execute.........."); } } META-INF/MANIFEST.MF Man

  • JS中获取 DOM 元素的绝对位置实例详解

    在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

  • JS图片轮播与索引变色功能实例详解

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met

  • goalng 结构体 方法集 接口实例详解

    目录 一 前序 二 事出有因 errors.As 方法签名 三 结构体与实例的数据结构 1. 结构体类型 2. 实例 3 方法调用 3.1 方法表达式 3.2 值实例调用所有方法 3.3 指针实例调用所有方法 3.4 空指针无法调用值方法 四 接口 1 接口数据结构 2 接口赋值 值方法集 指针方法集 总结 一 前序 很多时候我们以为自己懂了,但内心深处却偶有困惑,知识是严谨的,偶有困惑就是不懂,很幸运通过大量代码的磨练,终于看清困惑,并弄懂了. 本篇包括结构体,类型, 及 接口相关知识,希望对

  • Vue组件之间的参数传递与方法调用的实例详解

    目录 父组件向子组件 子组件调用父组件方法 其它组件间调用 补充: 父组件向子组件 1.父组件向子组件传参:父组件中的子组件标签中增加 :param="param" 子组件中增加 props 接受参数(注意props需要与data同级) props: { param: { type: Object } }, data() { return { ... } }, 2.父组件调用子组件方法:父组件中子组件的标签增加 ref="abc" 例如: <child ref

  • JS技巧Canvas 性能优化脏矩形渲染实例详解

    目录 正文 画布该如何更新? 脏矩形渲染原理 脏矩形渲染实现 性能测试 结尾 正文 使用 Canvas 做图形编辑器时,我们需要自己维护自己的图形树,来保存图形的信息,并定义元素之间的关系. 我们改变画布中的某个图形,去更新画布,最简单的是清空画布,然后根据图形树将所有图形再绘制一遍,这在图形较少的情况下是没什么问题的.但如果图形数量很多,那绘制起来可能就出现卡顿了. 那么,有没有什么办法来优化一下?有,脏矩形渲染. 画布该如何更新? 这里我们假设这么一个场景,画布上绘制了随机位置大量的绿球,然

  • Node.js安装教程和NPM包管理器使用详解

    2009年的JSCOnf大会上,一个叫Ryan Dahl的年轻程序员向人们展示了一个他正在做的项目,一个基于Google V8引擎的JavaScript运行平台,它提供了一套事件循环和低IO的应用程序编程接口(API).和其他的服务端平台不同, JavaScript天生就是事件驱动IO,而这个项目又大大降低了编写事件驱动应用程序的复杂度,因此它很快就以不可思议的速度的成长流行起来,并应用到实际项目中.(Jack:这段翻译的不太靠谱,原文:This project was not like oth

随机推荐