如何为 console.log 着色 - Javascript

在程序员日常开发过程中，经常需要使用 console.log 进行调试输出。然而，console.log 的输出都是默认的黑色字体，如果有多个输出信息，很容易就会造成混乱，难以查看。那么如何为 console.log 着色呢？下面就介绍几种方法。

方法一：使用 console.log 的格式化输出

console.log 支持多个参数，如果将参数格式化输出，则可以实现为不同信息添加不同的颜色。下面是一个示例代码：

console.log('%cHello, %cworld!', 'color: red', 'color: blue');

在这个例子中，%c 是格式化占位符，表示该参数是要添加样式的字符串。后面的 'color: red' 和 'color: blue' 就是样式，其中 red 和 blue 分别表示红色和蓝色。

执行上述代码后，console.log 的输出效果如下：

可以发现，在输出中，Hello 为红色字体，world 为蓝色字体，这样就可以为不同的信息添加不同的颜色了。

方法二：使用 console.log 的颜色选择器

另一种更加灵活的方法是使用 console.log 的颜色选择器。下面是一个示例代码：

console.log('%cHello, %cworld!', 'color: #f00', 'color: #00f');

在这个例子中，和方法一相比，样式的表示方式变为了 '#f00' 和 '#00f'。它们表示的是颜色的十六进制码。可以通过网上的颜色选择器获取到需要的颜色的代码。

执行上述代码后，console.log 的输出效果与方法一相同。

方法三：使用第三方库

除了原生的 console.log，还有很多第三方库可以实现更加极致的输出效果。比如 chalk 库。

chalk 库可以为 console.log 的输出信息添加各种颜色和样式，使用也非常简单。下面是一个示例代码：

const chalk = require('chalk');
console.log(chalk.red('Hello') + ' world' + chalk.blue('!'));

在这个例子中，使用了 chalk.red 和 chalk.blue 方法设置字符串样式，也就是将 'Hello' 设置为红色，'!' 设置为蓝色。使用 + 连接字符串，最终输出的效果如下：

可以发现，输出结果非常丰富，可以设置各种样式。

以上就是如何为 console.log 着色的三种方法，可以根据自己的需要进行选择。