前台碰撞室之console.log与文本字符

  • 时间:2020-04-24 21:10 作者:小遁哥 来源: 阅读:262
  • 扫一扫,手机访问
摘要:觉得读文字麻烦的小伙伴,可以看评论中的视频地址导读在vscode环境下实现控制台输出文本,效果如下:image.png正文首先进入http://patorjk.com/software/taag/#p=display&f=Alpha&t=Fire而后Copy生成的文本,在网站左下角image.png

觉得读文字麻烦的小伙伴,可以看评论中的视频地址

导读

vscode环境下实现控制台输出文本,效果如下:

image.png

正文

首先进入http://patorjk.com/software/taag/#p=display&f=Alpha&t=Fire
而后Copy生成的文本,在网站左下角

image.png

在代码中用模板字符传包裹,假如你设置了黏贴自动格式化,很有可能会错乱,像这样

image.png
Ctrl+z撤销就好,我这里撤销一次就好,变成这样

image.png

我们先来看一下效果如何console.log(str);

image.png

代码中看是好的,但是输出后不成样子
由于\是转译字符,这时候我们需要借助vs code做替换,为了保险起见,选中文本所在的区域,Ctrl+H
注意是\\替换为\\\\ 点击一律替换

image.png

替换后


image.png

预计很多小伙伴在自己玩的时候做到这一步就觉得方案行不通(此处省略3千字),由于图案显著乱了,实则不然,输出的时候恰似做了个逆过程,看一下效果。


image.png

还有一种情况是你的文本太长了,浏览器显示不下,看起来也会乱掉,比方 http://patorjk.com/software/taag/#p=display&f=Alpha&t=Seven%20Floor

在Source中还是好的


image.png

但在Console中


image.png

结语

灵感来源:5分钟教你使用console.log发布公司的招聘信息

没错,我就是读了这篇文章后想要输出 Seven Floor..

  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】树莓派安装TensorFlow(2020-04-24 21:11)
【系统环境|服务器应用】防面试-SD_WebImage(2020-04-24 21:11)
【系统环境|服务器应用】推荐一款视频控件xgplayer(2020-04-24 21:11)
【系统环境|服务器应用】PostgreSQL 源码解读(27)- 查询语句#12(查询优化-上拉子链接#2)(2020-04-24 21:11)
【系统环境|服务器应用】如何轻松学习JavaScript?(2020-04-24 21:10)
【系统环境|服务器应用】【源码剖析】Launcher 8.0 源码 (12) --- Launcher 启动流程 第五步之计算桌面各布局细节参数(2020-04-24 21:10)
【系统环境|服务器应用】前台碰撞室之console.log与文本字符(2020-04-24 21:10)
【系统环境|服务器应用】好用的Middleware实现(2020-04-24 21:10)
【系统环境|服务器应用】前台面试每日 3+1 —— 第373天(2020-04-24 21:10)
【系统环境|服务器应用】绍圣--kafka之生产者(五)(2020-04-24 21:10)
手机二维码手机访问领取大礼包
返回顶部