彩色的 console.log - Javascript

在Javascript中，我们可以使用 console.log() 来输出调试信息，但是有时候，我们想让输出的信息更加生动，更加易于辨别。这时，我们可以使用彩色的 console.log()！

语法

console.log("%c 输出内容", "样式");

其中，“输出内容” 是需要输出的内容，而 “样式” 是一个字符串，用来定义输出内容的样式。

样式

样式可以通过CSS属性定义。下面是一些常用的CSS属性，用于定义彩色的输出：

• color：文本颜色
• background-color：背景颜色
• font-size：字体大小
• font-family：字体
• font-style：字体风格（如斜体）
• text-decoration：文本修饰（如下划线、删除线）
• font-weight：字体粗细

可以使用这些属性，结合字符串模板，定义不同的样式。

实例

下面是一些实例：

console.log("%cHello World", "color:red; background-color: yellow");
console.log("%cHello World", "font-size:36px; font-family: cursive; font-style:italic");
console.log("%cHello World", "text-decoration: underline overline; font-weight:bold");

输出结果如下所示：

注意事项

• 样式定义时，多个属性间用分号相隔。
• 样式定义中，如果属性名称包含连字符(-)，则需要用引号将其包起来，例如：text-decoration: "underline overline";
• 样式定义中，如果需要输出引号，可以使用反斜杠转义，例如：console.log('%c双引号："\'"', 'color:blue');

总结

彩色的 console.log() 可以让输出的信息更加生动、易于辨别，帮助我们更加高效地进行调试。需要注意样式定义中的语法细节。