领导被我的花式console.log吸引了！直接写入公司公共库！

背景简介

这几天代码评审，领导无意中看到了我本地代码的控制台，被我花里胡哨的console打印内容吸引了！

老板看见后，说我这东西有意思，花里胡哨的，他喜欢！

但是随即又问我，这么花里胡哨的东西，上生产会影响性能吧？我自信的说：不会，代码内有判断的，只有开发环境会打印！

老板很满意，于是让我给其他前端同事分享一下，讲解下实现思路！最终，这个方法还被写入公司的公用utils库里，供大家使用！

console简介

console 是一个用于调试和记录信息的内置对象，提供了多种方法，可以帮助开发者输出各种信息，进行调试和分析。

console.log()

用于输出一般信息，大家应该在熟悉不过了。

console.info() :

输出信息，与 console.log 类似，但在某些浏览器中可能有不同的样式。

console.warn() :

输出警告信息，通常会以黄色背景或带有警告图标的样式显示。

console.error() :

输出错误信息，通常会以红色背景或带有错误图标的样式显示。

console.table() :

以表格形式输出数据，适用于数组和对象。

例如：

const users = [{ name: '石小石', age: 18 },{ name: '刘亦菲', age: 18 }
];
console.table(users);

通过上述介绍，我们可以看出，原生的文本信息、警告信息、错误信息、数组信息打印出来的效果都很普通，辨识度不高！现在我们通过console.log来实现一些花里花哨的样式！

技术方案

console.log()

console.log() 可以接受任何类型的参数，包括字符串、数字、布尔值、对象、数组、函数等。最厉害的是，它支持占位符!

常用的占位符：

%s - 字符串
%d or %i - 整数
%f - 浮点数
%o - 对象
%c - CSS 样式

格式化字符串

console.log() 支持类似于 C 语言 printf 函数的格式化字符串。我们可以使用占位符来插入变量值。

const name = 'Alice';
const age = 30;
console.log('Name: %s, Age: %d', name, age); // Name: Alice, Age: 30

添加样式

可以使用 %c 占位符添加 CSS 样式，使输出内容更加美观。

console.log('%c This is a styled message', 'color: red; font-size: 20px;');

自定义样式的实现，其实主要是靠%c 占位符添加 CSS 样式实现的！

实现美化的信息打印

基础信息打印

我们创建一个prettyLog方法，用于逻辑编写

// 美化打印实现方法
const prettyLog = () => {const isEmpty = (value: any) => {return value == null || value === undefined || value === '';};const prettyPrint = (title: string, text: string, color: string) => {console.log(`%c ${title} %c ${text} %c`,`background:${color};border:1px solid ${color}; padding: 1px; border-radius: 2px 0 0 2px; color: #fff;`,`border:1px solid ${color}; padding: 1px; border-radius: 0 2px 2px 0; color: ${color};`,'background:transparent');};// 基础信息打印const info = (textOrTitle: string, content = '') => {const title = isEmpty(content) ? 'Info' : textOrTitle;const text = isEmpty(content) ? textOrTitle : content;prettyPrint(title, text, '#909399');};return {info};
};

上述代码定义了一个 prettyLog 函数，用于美化打印信息到控制台。通过自定义样式，输出信息以更易读和美观的格式呈现。

我们使用一下看看效果

// 创建打印对象
const log = prettyLog();// 不带标题
log.info('这是基础信息!');//带标题
log.info('注意看', '这是个男人叫小帅!');

info 方法用于输出信息级别的日志。它接受两个参数：textOrTitle 和 content。如果只提供一个参数，则视为内容并设置默认标题为 Info；如果提供两个参数，则第一个参数为标题，第二个参数为内容。最后调用 prettyPrint 方法进行输出。

错误信息打印

const prettyLog = () => {const isEmpty = (value: any) => {return value == null || value === undefined || value === '';};const prettyPrint = (title: string, text: string, color: string) => {// ...};const info = (textOrTitle: string, content