觉得读文字麻烦的小伙伴,可以看评论中的视频地址
导读
在vscode
环境下实现控制台输出文本,效果如下:
![](https://img.haomeiwen.com/i3004133/bba6c67883d368de.png)
正文
首先进入http://patorjk.com/software/taag/#p=display&f=Alpha&t=Fire
然后Copy
生成的文本,在网站左下角
![](https://img.haomeiwen.com/i3004133/6fc0b825f1c95e03.png)
在代码中用模板字符传包裹,如果你设置了黏贴自动格式化,很有可能会错乱,像这样
![](https://img.haomeiwen.com/i3004133/8f69afb18170bb49.png)
Ctrl+z
撤销就好,我这里撤销一次就好,变成这样
![](https://img.haomeiwen.com/i3004133/a203bc5f63c6ee70.png)
我们先来看一下效果如何console.log(str);
![](https://img.haomeiwen.com/i3004133/a14665c24bc112ba.png)
代码中看是好的,但是输出后不成样子
因为\
是转译字符,这时候我们需要借助vs code
做替换,为了保险起见,选中文本所在的区域,Ctrl+H
注意是\\
替换为\\\\
点击全部替换
![](https://img.haomeiwen.com/i3004133/6ea1d5eea3ea8e2f.png)
替换后
![](https://img.haomeiwen.com/i3004133/ca26c820da51b085.png)
估计很多小伙伴在自己玩的时候做到这一步就觉得方案行不通(此处省略3千字),因为图案明显乱了,实则不然,输出的时候恰似做了个逆过程,看一下效果。
![](https://img.haomeiwen.com/i3004133/194146cd3f81cdba.png)
还有一种情况是你的文本太长了,浏览器显示不下,看起来也会乱掉,比如 http://patorjk.com/software/taag/#p=display&f=Alpha&t=Seven%20Floor
在Source中还是好的
![](https://img.haomeiwen.com/i3004133/2fb34b05085a79aa.png)
但在Console中
![](https://img.haomeiwen.com/i3004133/cfc5b9f21c927ee8.png)
结语
灵感来源:5分钟教你使用console.log发布公司的招聘信息
没错,我就是读了这篇文章后想要输出 Seven Floor..
网友评论