控制台：控制台艺术字 & 为控制台输出增加样式（console.log( )）

控制台/代码文档LOGO

除了知乎的控制台，许多常用的依赖或SDK的README中也会出现这样的字符logo。

比如知乎的这个艺术字就可以用下面这个网站自动生成：

Text to ASCII Art Generator (TAAG)

控制台输出通过多个  console.log  语句、参数，或者  '\n'  转义换行符换行，也可以直接用  `  符号包裹字符串内容来声明预定义格式文本以保留换行，

console.log('第一行\n第二行');
// ===
console.log('第一行', '第二行');
// ===
console.log(`第一行
第二行`);

如果觉得  `  很方便可读性很强，但在代码里没有缩进很丑，大胆加上缩进然后用  dedent  这个 npm 包提供的函数包裹它，它有  2000+  开源包的背书，但要注意它  minified  也会有 2KB 的体积， +gzipped  可以进一步减少至 998B

import dedent from 'dedent'
console.log(dedent`开源社区
    充满爱
        —— CN 开发者

`);

// 控制台中 be like：
// 开源社区
// 充满爱
//     —— CN 开发者
// (消失的换行，此处作解释实际不输出，下同)

控制台输出样式

在字符串中通过  %c  标记一个起始结点，它没有结束符，如果后半节需要使用控制台默认样式，只需要在后半节的开始部分加上  %c  ，并加上一个空CSS字符串：  console.log('%c hello %c world', 'color: red', ' ') ，这样就会对前一个样式产生覆盖。

最后以 %c 标记的顺序在 log 结尾处写入 CSS 字符串并用逗号分隔，就像：['%c小红%c和%c小蓝', '小红 CSS', '和 CSS', '小蓝 CSS']，就像这样：

console.log('%c 应急食品的百种烹饪方式 \n' +
        '%c                       ——正义人 ', 'color: #333', 'color: #999')

除了color以外可以还可以使用任何非浏览器内核额外提供(-webkit-/-ms-/-moz-/-o-/...) 的标准CSS、CSS3样式，甚至可以将自己的照片输出在控制台。

需要注意有几个起始符就写几套样式，否则后面未定义样式的节段都会应用最后一个定义的样式，且未定义样式的  %c  也会被当成字符输出打印出来。

---

// 展示成果
console.log('%c _____________________________\n' +
        '%c   ______     %c______     %c__  __    \n' +
        '%c  /\\___  \\   %c/\\___  \\   %c/\\_\\_\\_\\   \n' +
        '%c  \\/_/  /__  %c\\/_/  /__  %c\\/_/\\_\\/_  \n' +
        '%c    /\\_____\\   %c/\\_____\\   %c/\\_\\/\\_\\ \n' +
        '%c    \\/_____/   %c\\/_____/   %c\\/_/\\/_/\n' +
        '%c       _____________________________\n' +
        '   ','color:#ff0000','color:#ff0000','color:#ff3b00','color:#ff7500','color:#ff7800','color:#FD7B00','color:#FFAD00','color: #FEDA00','color:#D0FD00','color:#93FF00','color:#80FF00','color:#1AFF00','color:#00FF2E','color:#00FF3B','color:#00FFB1','color:#00F2F9','color:#00E0F9')

- END -