设置控制台消息的格式
您可以使用格式说明符来设置控制台消息的格式。
格式说明符以百分号 (%) 开头,以"类型字符"结尾,该类型字符指示数据类型(整数、浮点数等)。
例如
- 打开控制台
- 输入以下控制台命令。
js
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 样式规则应用于输出字符串(如第二个参数指定) |
应用多个格式说明符
您可以在一条消息中使用多个格式说明符。
输入以下控制台命令。
js
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.
消息。
了解类型转换
输出消息将根据格式说明符进行转换。
输入以下控制台命令。
js
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
表示值应该/将会转换为整数。
以下示例说明了类型转换无效时会出现什么情况。
输入以下控制台命令。
js
console.log('Jane has %i kiwis.', 'two');
上述命令会生成 Jane has NaN kiwis.
消息。
%i
表示值应该/将会转换为整数,但实参是字符串。因此,它会返回 NaN (Not-A-Number)。
设置控制台消息样式
在开发者工具中,您可以通过两种方式设置控制台消息的样式。
带有格式说明符的样式
您可以使用 %c
格式说明符通过 CSS 设置控制台消息的样式。
输入以下控制台命令。
js
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 " |
下面是另一个具有多个样式的更复杂的示例。
- 输入以下控制台命令。
js
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站的:
js
console.info("%c%s", "line-height: 30px; color: #FF6699", "bili-fe-mirror:".concat(S))
掘金:
js
console.log('%c想要加入稀土掘金?投递简历:https://job.toutiao.com/s/idq6X5rb', 'color:#1e80ff;');
百度
js
window.console && window.console.log && (console.log("这是一个最好的时代,\n科技的发展给予了每个人创造价值的可能性;\n这也是一个最充满想象的时代,\n每一位心怀梦想的人,终会奔向星辰大海。\n百度与你们一起仰望星辰大海,携手共筑未来!\n"),
console.log("%c百度2023校园招聘简历投递:https://talent.baidu.com/jobs/list", "color:red"))