因为最近在开发一个前端脚手架，要使用到一个 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 将颜色重置为默认颜色。
-
前景色（文字颜色）：
- 黑色：\x1b[30m
- 红色：\x1b[31m
- 绿色：\x1b[32m
- 黄色：\x1b[33m
- 蓝色：\x1b[34m
- 品红：\x1b[35m
- 青色：\x1b[36m
- 白色：\x1b[37m
-
背景色：
- 黑色：\x1b[40m
- 红色：\x1b[41m
- 绿色：\x1b[42m
- 黄色：\x1b[43m
- 蓝色：\x1b[44m
- 品红：\x1b[45m
- 青色：\x1b[46m
- 白色：\x1b[47m
例如，要将文本颜色设置为红色，可以使用：
ESC[31m你的文本ESC[0m
这里，ESC[31m 将文本颜色设置为红色，ESC[0m 则重置文本属性，以避免红色文本影响后续的文本输出。
例如：
console.log("\x1b[31m这是红色的文本\x1b[0m");
除此之外，还有一些其他的简单的示例，如下代码所示：
// 输出红色文字
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 （交换前景色和背景色）
组合样式
// 加粗的红色文字
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 转义序列。反显会交换文本的前景色和背景色，创建一种“反色”效果。
最终输出结果如下图所示：
创建文本动画
文本动画可以通过定期更新控制台内容来实现，例如创建一个简单的“加载”动画：
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，那么你一定有必要来监听打包的进度，那么我们可以通过监听某个值的变化，并希望实时以柱状图的形式显示在控制台中：
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 🚗🚗🚗
原文链接：https://juejin.cn/post/7355382754693464105 作者：Moment
