【JS】console.log 控制台彩色字符

原创已于 2023-03-27 12:35:19 修改 · 2k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

本文为 one-ccs 原创文章，引用必须注明出处！

标签

#javascript #前端 #css

收录于

于 2022-12-24 22:37:41 首次发布

JS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在JavaScript中利用console.log()函数输出彩色字符，通过使用%c格式化字符串结合CSS样式实现文本的高亮和美化。示例代码显示了如何定义不同样式的文本，如作者和版本信息，从而在控制台创建出具有视觉吸引力的输出。

JavaScript 控制台输出彩色字符

一、格式

console.log(format_string, ...);

有点类似于 C 语言的 printf 格式化，其中 format_string 参数可以用 %c 或 %s 作为占位符，%c 用于定义后续文本的样式（使用 css ）；%s 表示普通文本。

二、示例

console.log(
    '%c %s %c %s',
    'border: 1px solid white;border-radius: 3px 0 0 3px;padding: 2px 5px;color: white;background-color: green;',
    '作者：one-ccs',
    'border: 1px solid white;border-radius: 0 3px 3px 0;padding: 2px 5px;color: black;background-color: white;border-left: none;',
    'v0.0.1'
);