设置控制台消息的格式
您可以使用格式说明符来设置控制台消息的格式。
格式说明符以百分号 (%) 开头，以“类型字符”结尾，该类型字符指示数据类型（整数、浮点数等）。
例如
- 打开控制台
- 输入以下控制台命令。
const tools = 'Chrome DevTools';
console.warn('%s is awesome.', tools);
- 上述命令会生成
Chrome DevTools is awesome.消息。
下面列出了 Chrome 开发者工具目前支持的 格式说明符
| 说明符 | 输出 |
|---|---|
%s |
将值的格式设置为字符串 |
%i 或 %d |
将值的格式设置为整数 |
%f |
将值的格式设置为浮点值 |
%o |
将值的格式设置为展开式 DOM 元素 |
%O |
将值的格式设置为展开式 JavaScript 对象 |
%c |
将 CSS 样式规则应用于输出字符串（如第二个参数指定） |
应用多个格式说明符
您可以在一条消息中使用多个格式说明符。
输入以下控制台命令。
console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);
上述命令会生成 The total weight of 3 apples and 2 oranges is 432.4 grams. 消息。
了解类型转换
输出消息将根据格式说明符进行转换。
输入以下控制台命令。
console.log('I have %i apples and %d oranges.', 2, 3.5);
上述命令会生成 I have 2 apples and 3 oranges. 消息。
- 输出内容为
3 oranges，而不是3.5 oranges。%d表示值应该/将会转换为整数。
以下示例说明了类型转换无效时会出现什么情况。
输入以下控制台命令。
console.log('Jane has %i kiwis.', 'two');
上述命令会生成 Jane has NaN kiwis. 消息。
%i表示值应该/将会转换为整数，但实参是字符串。因此，它会返回 NaN (Not-A-Number)。
设置控制台消息样式
在开发者工具中，您可以通过两种方式设置控制台消息的样式。
带有格式说明符的样式
您可以使用 %c 格式说明符通过 CSS 设置控制台消息的样式。
输入以下控制台命令。
const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;'
console.log("%cHooray", style);
上述命令会生成应用了 CSS 样式的 Hooray。
要点：为了防止数据泄露和绕过安全政策，采用此格式的 url() CSS 函数仅支持 data: 网址架构。 例如，您可以通过以下方式设置背景图片： css background: url(data:image/png;base64,iVBORw…); 其中 iVBORw… 是采用 base64 编码的 PNG 图片。
使用 ANSI 转义序列进行样式设置
您可以使用 ANSI 转义序列来设置控制台消息的样式。
Node.js 开发者经常会借助 ANSI 转义序列为日志消息着色，这往往要借助一些样式库，例如 chalk、colors、ansi-colors、kleur。
不过，您可以使用 ANSI 转义序列设置消息样式，而无需使用任何库。语法如下：
\x1B[𝘗1;…;𝘗nm
其中：
𝘗1到𝘗n是 SGR（选择图形呈现）参数的有效子序列。𝘗1到𝘗n中的任何参数都可以省略，在这种情况下，系统会假定其值为零。\x1B[m是\x1B[0m的简写形式，其中显示属性将重置。
例如，
- 输入以下控制台命令。
js console.log('\x1B[41;93;4mHello\x1B[m'); - 上述命令会生成一条
Hello消息，带有红色背景、黄色文本和带下划线。
下面列出了开发者工具中支持的颜色代码。
| 前景 | 背景 | 浅色主题 | 深色主题 |
|---|---|---|---|
| 30 | 40 | #00000 | #00000 |
| 31 | 41 | #AA0000 | #ed4e4c |
| 32 | 42 | #00AA00 | #01c800 |
| 33 | 43 | #AA5500 | #d2c057 |
| 34 | 44 | #0000AA | #2774f0 |
| 35 | 45 | #AA00AA | #a142f4 |
| 36 | 46 | #00AAAA | #12b5cb |
| 37 | 47 | #AAAAAA | #cfd0d0 |
| 90 | 100 | #555555 | #898989 |
| 91 | 101 | #FF5555 | #f28b82 |
| 92 | 102 | #55FF55 | #01c801 |
| 93 | 103 | #FFFF55 | #ddfb55 |
| 94 | 104 | #5555FF | #669df6 |
| 95 | 105 | #FF55FF | #d670d6 |
| 96 | 106 | #55FFFF | #84f0ff |
| 97 | 107 | #FFFFFF | #FFFFFF |
下面列出了开发者工具中支持的样式设置代码。
| 参数 | 含义 |
|---|---|
| 0 | 重置所有显示属性 |
| 1 | font-weight: bold |
| 2 | font-weight: lighter |
| 3 | font-style: italic |
| 4 | 将 underline 添加到 text-decoration 属性 |
| 9 | 将 line-through 添加到 text-decoration 属性 |
| 22 | 重置 font-weight 属性 |
| 23 | 重置 font-style 属性 |
| 24 | 从 text-decoration 资源中移除“underline” |
| 29 | 从 text-decoration 资源中移除“line-through” |
| 38；2；R；G；B | color: rgb(𝑅,𝐺,𝐵) |
| 39 | 重置color property |
| 48；2；R；G；B | background: rgb(𝑅,𝐺,𝐵) |
| 49 | 重置background property |
| 53 | 将 overline 添加到 text-decoration 属性 |
| 55 | 从 text-decoration 资源中移除“overline” |
下面是另一个具有多个样式的更复杂的示例。
- 输入以下控制台命令。
const hello = '\x1B[41;93;4mHello';
const Space = '\x1B[m '; const world = '\x1B[34;102;9mWorld';
console.log(hello + Space + world);
- 上述命令会生成一条具有 3 种不同样式的
Hello World消息。
更多案例
我们看看 b站的：
console.info("%c%s", "line-height: 30px; color: #FF6699", "bili-fe-mirror:".concat(S))
掘金：
console.log('%c想要加入稀土掘金？投递简历：https://job.toutiao.com/s/idq6X5rb', 'color:#1e80ff;');
百度
window.console && window.console.log && (console.log("这是一个最好的时代，\n科技的发展给予了每个人创造价值的可能性；\n这也是一个最充满想象的时代，\n每一位心怀梦想的人，终会奔向星辰大海。\n百度与你们一起仰望星辰大海，携手共筑未来！\n"),
console.log("%c百度2023校园招聘简历投递：https://talent.baidu.com/jobs/list", "color:red"))
原文链接：https://juejin.cn/post/7312031033302253603 作者：知了清语
