JS_console.log()的进阶使用_console打印控制台样式_编码图案

1. 基本语法：

console.log(object [, object, …])

2. 占位符:

console上述的集中度支持printf的占位符格式，支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）:

占位符	作用
%s	字符串
%d or %i	整数
%f	浮点数
%o	可展开的DOM
%O	列出DOM的属性
%c	根据提供的css样式格式化字符串

• 图片输出

console.log("%c","background:url(图片路径) no-repeat;padding:50px 300px;line-height:120px");

• 换行输出

console.log([
	"第一行",
	"第二行"
].join('\n'));

不过要注意了：

• console不能定义img，因此用背景图片代替。
• console不支持width和height，利用空格和font-size代替；还可以使用padding和line-height代替宽高。
• chrome没出来？没出来就对了……不支持啊！原因是ConsoleViewMessage.js源码把url和谐掉了。不过可以下载firebug插件查看啦~ gif图片也是支持的~~~
• console是默认换行的。

控制台样式案例：

console.log("%c响应数据%c"+new Date(),
	'background: #00cc00; color: #fff; border-radius: 3px 0 0 3px;padding:2px 5px',
	'background: #1475B2; color: #fff; border-radius: 0 3px 3px 0;padding:2px 5px',
)

//uviewui
console.log(`\n %c uView V${version} %c https://www.uviewui.com/ \n\n`, 'color: #ffffff; background: #3c9cff; padding:5px 0;', 'color: #3c9cff;background: #ffffff; padding:5px 0;');

制作我们自己的字符图案：

ASCII字符画制作工具，图片转ascll字符
img2txt
http://patorjk.com/software/taag/#p=display&h=2&v=1&f=Acrobatic&t=SUCCESS
ASCII Generator Portable(将图片转为字符画) v2.0下载

制作思路：找到一个我们喜欢图案，变成这样的字符形式，然后字符形式的图案的换行（\r\n）都去掉，换成 \n，这样就能正确的在console.log()中正确打印。