因为最近在开发一个前端脚手架，要使用到一个 chalk 的包，但是我可能一些版本的问题，需要做版本的降级处理，但是我也就用到一两个方法，于是便有了一些自己研究这些让控制台输出好看样式的想法。

ANSI

在 Node.js 中，可以通过向控制台输出包含 ANSI 转义码的字符串来实现彩色文本。ANSI 转义码是一系列用于控制视频文本外观的代码，比如颜色、加粗等。这种方式不需要依赖任何第三方库。

ANSI 转义序列是一系列由 ASCII 字符组成的序列，用于控制终端界面中文本的格式化。这些序列以 ESC（转义）字符开头，即 ASCII 码中的第 27 个字符（用十六进制表示为 0x1B，或者八进制表示为 033）。ANSI 转义序列被用于在文本终端上实现文本颜色、光标位置、清屏等控制功能。这些功能对于创建用户友好的终端应用程序非常重要。

ANSI 转义序列的基本格式

ANSI 转义序列的基本格式通常是这样的：

ESC[参数m

在上面的这些内容当中：

ESC 是转义字符（\033 或\x1b）。
[ 是固定的字符，用来标识序列的开始。
参数是一系列数字，用分号分隔，用于指定颜色、样式等。
m 是一个结束字符，用来表示序列的结束。

常用的 ANSI 转义序列

以下是一些常用的 ANSI 转义序列示例：

重置：\x1b[0m 将颜色重置为默认颜色。
前景色（文字颜色）：
1. 黑色：\x1b[30m
2. 红色：\x1b[31m
3. 绿色：\x1b[32m
4. 黄色：\x1b[33m
5. 蓝色：\x1b[34m
6. 品红：\x1b[35m
7. 青色：\x1b[36m
8. 白色：\x1b[37m
背景色：
1. 黑色：\x1b[40m
2. 红色：\x1b[41m
3. 绿色：\x1b[42m
4. 黄色：\x1b[43m
5. 蓝色：\x1b[44m
6. 品红：\x1b[45m
7. 青色：\x1b[46m
8. 白色：\x1b[47m

例如，要将文本颜色设置为红色，可以使用：

ESC[31m你的文本ESC[0m

这里，ESC[31m 将文本颜色设置为红色，ESC[0m 则重置文本属性，以避免红色文本影响后续的文本输出。

例如：

js 复制代码

console.log("\x1b[31m这是红色的文本\x1b[0m");

除此之外，还有一些其他的简单的示例，如下代码所示：

js 复制代码

// 输出红色文字
console.log("\x1b[31m%s\x1b[0m", "Hello, this is red text!");

// 输出绿色文字
console.log("\x1b[32m%s\x1b[0m", "Hello, this is green text!");

// 输出带有蓝色背景和白色文字的文本
console.log(
  "\x1b[44m\x1b[37m%s\x1b[0m",
  "Hello, white text on a blue background!"
);

在这些示例中，%s 是一个占位符，用于 console.log 中的字符串替换。\x1b[0m 用于在文本输出后重置颜色，以避免影响到之后的控制台输出。

如下图所示，这是代码的最终结果输出

一些比较惊艳人的效果

要创建更加引人注目的控制台输出，可以混合使用不同的 ANSI 转义码，实现更丰富的文本效果，例如彩色文本、加粗、闪烁、背景色等。此外，通过定时更改输出，还可以实现简单的动画效果。

文本样式

要添加一些文本样式，最基本的就是加粗和下划线等等：

加粗：\x1b[1m
下划线：\x1b[4m
反色：\x1b[7m （交换前景色和背景色）

组合样式

js 复制代码

// 加粗的红色文字
console.log("\x1b[1m\x1b[31m%s\x1b[0m", "This is bold red text.");

// 下划线和青色文字
console.log("\x1b[4m\x1b[36m%s\x1b[0m", "This is underlined cyan text.");

// 反色显示的消息
console.log("\x1b[7m%s\x1b[0m", "This message has inverted colors.");

在上面的这些代码中，主要来讲解一下如下字段：

\x1b[1m 是启用加粗样式的 ANSI 转义序列。
\x1b[31m 是将文本颜色设置为红色的 ANSI 转义序列。
\x1b[4m 是启用下划线样式的 ANSI 转义序列。
\x1b[36m 是将文本颜色设置为青色（Cyan）的 ANSI 转义序列。
\x1b[7m 是启用反显（反色）样式的 ANSI 转义序列。反显会交换文本的前景色和背景色，创建一种"反色"效果。

最终输出结果如下图所示：

创建文本动画

文本动画可以通过定期更新控制台内容来实现，例如创建一个简单的"加载"动画：

js 复制代码

let frame = 0;
const frames = ["-", "\\", "|", "/"];
const interval = setInterval(() => {
  process.stdout.write("\r" + frames[frame]);
  frame = (frame + 1) % frames.length;
}, 100);

// 在10秒后停止动画
setTimeout(() => {
  clearInterval(interval);
  process.stdout.write("\rDone!\n");
}, 10000);

这段 Node.js 代码实现了一个简单的命令行加载动画。它周期性地在终端显示四个字符（-、\、|、/），模拟一个旋转的效果。动画每隔 100 毫秒更新一次，持续 10 秒钟后自动停止，并在终端打印"Done!"消息表示结束。

实时数据可视化

在项目的开发过程中，如果你使用过 webpack，那么你一定有必要来监听打包的进度，那么我们可以通过监听某个值的变化，并希望实时以柱状图的形式显示在控制台中：

js 复制代码

const drawBar = (value) => {
  const maxBarLength = 50;
  const barLength = Math.floor((value / 100) * maxBarLength);
  const bar = "\x1b[32m" + "█".repeat(barLength) + "\x1b[0m";
  const empty = " ".repeat(maxBarLength - barLength);

  console.clear();
  console.log(`[${bar}${empty}] ${value}%`);
};

let currentValue = 0;

setInterval(() => {
  currentValue = (currentValue + 5) % 105;
  drawBar(currentValue);
}, 200);

这段代码在终端上绘制一个进度条，其中使用绿色的 █ 字符表示已完成部分，空格表示未完成部分，并显示当前的进度百分比，通过 ANSI 转义序列增强其绿色填充部分的视觉效果。

总结

上面这些示例展示了使用 Node.js 和 ANSI 转义码在控制台中创建动态和交互式输出的不同方法。结合这些技术，我们可以为 Node.js 应用添加吸引人的视觉效果和提高用户交互体验。

最后分享两个我的两个开源项目,它们分别是:

这两个项目都会一直维护的，如果你想参与或者交流学习，可以加我微信 yunmz777 如果你也喜欢,欢迎 star 🚗🚗🚗

一行代码让你的控制台终端骚起来

ANSI

ANSI 转义序列的基本格式

常用的 ANSI 转义序列

一些比较惊艳人的效果

文本样式

组合样式

创建文本动画

实时数据可视化

总结