带有彩色字体的 console.log - JavaScript

在 JavaScript 中，我们通常使用 console.log 来输出调试信息。然而，有时候希望将输出的信息以特殊的方式呈现出来，这时就可以使用带有彩色字体的 console.log。

使用 ANSI 转义码实现彩色字体

彩色字体的实现主要依靠 ANSI 转义码。ANSI 转义码是一种控制字符序列，它可以改变输出设备的状态或颜色，例如改变前景色（字体颜色）、背景色等。在终端中，我们可以通过输出这些控制字符来实现彩色字体输出。

在 JavaScript 中，我们可以使用 \x1b 或 \u001b 来表示 ANSI 转义码。其中 \x1b 表示 16 进制的 ASCII 码，\u001b 则表示的是 Unicode 编码。

以下是一些常用的 ANSI 转义码：

• \x1b[0m 或 \u001b[0m：重置所有属性，即初始化颜色。该码上面或下面的所有文本都以默认颜色呈现。

• \x1b[1m 或 \u001b[1m：字体加粗。

• \x1b[3m 或 \u001b[3m：斜体字。

• \x1b[4m 或 \u001b[4m：下划线。

• \x1b[30m 到 \x1b[37m 或 \u001b[30m 到 \u001b[37m：设置前景色，30 到 37 分别表示黑、红、绿、黄、蓝、洋红、青、白 8 种颜色。

• \x1b[40m 到 \x1b[47m 或 \u001b[40m 到 \u001b[47m：设置背景色，40 到 47 分别表示黑、红、绿、黄、蓝、洋红、青、白 8 种颜色。

我们可以将这些控制字符和需要显示的文本拼接起来，即可实现带有彩色字体的输出。例如：

console.log('\x1b[31m', 'Error:', '\x1b[0m', 'Something went wrong');

上面的代码中，\x1b[31m 表示红色前景色，\x1b[0m 表示重置属性（即回到默认颜色）。

使用封装函数简化彩色字体输出

虽然可以直接手动拼接输出字符串，但是这种方式不够灵活，而且容易出错。我们可以封装一个函数来简化彩色字体的输出。

以下是一个可能的实现：

function colorLog(fgColor, bgColor, intensity, text) {
  const fgColorCode = fgColor ? `\x1b[${fgColor}m` : '';
  const bgColorCode = bgColor ? `\x1b[${bgColor + 10}m` : '';
  const intensityCode = (intensity === 'bold') ? '\x1b[1m' : (intensity === 'dim') ? '\x1b[2m' : '';
  const resetCode = '\x1b[0m';
  console.log(`${fgColorCode}${bgColorCode}${intensityCode}${text}${resetCode}`);
}

这个函数接受 4 个参数：

• fgColor：前景色，取值范围为 30 到 37（默认为 undefined）。

• bgColor：背景色，取值范围为 40 到 47（默认为 undefined）。

• intensity：字体强调方式，取值为 undefined（默认）、bold（加粗）或 dim（减淡）。

• text：需要输出的文本。

例子

使用封装函数 colorLog 可以很方便地实现彩色字体输出。以下是一些例子：

colorLog(31, undefined, 'bold', 'Error: Something went wrong');

colorLog(undefined, 42, 'dim', 'The background is green');

colorLog(36, 44, undefined, 'Cyan text on blue background');

结论

通过使用 ANSI 转义码和封装函数，我们可以实现带有彩色字体的 console.log，从而加强调试信息的可读性和易用性。不过需要注意的是，彩色字体的实现的效果依赖于终端的支持程度，在一些不支持的终端中可能看不到实际效果。