使用console.log输出特殊字符图案或自定义图片

阿湫

已于 2022-07-15 16:18:54 修改

阅读量4k

点赞数 13

分类专栏：前端学习文章标签： html 前端

于 2022-07-15 12:04:28 首次发布

本文链接：https://blog.csdn.net/qq_51247028/article/details/125797725

版权

前端学习专栏收录该内容

6 篇文章 2 订阅

订阅专栏

这篇博客介绍了如何利用console.log在浏览器控制台输出特殊字符编码的图案，包括程序员的浪漫和公司招聘信息。通过在线工具生成字符图案，并提供代码示例展示如何实现。此外，还分享了几个用于创建字符画的网站，包括根据文字和图片生成字符图案的资源。

摘要由CSDN通过智能技术生成

最近看到一篇比较有趣的文章

程序员的浪漫–console.log()在浏览器控制台输出特殊字符编码的图案
想自己动手试一试，很明显我做的效果不好，弄了很久还是没弄出来
在这里插入图片描述

下面介绍另外一种方法，方法来自—— 使用console.log打印公司招聘信息和字符画

一、首先需要得到我们想要的字符图案 可以去这个网站生成 http://patorjk.com/

在白色框内输入想要的字符（ps：有的样式不支持数字、或者不支持同时有数字和字母的字符串，不支持中文字符）
左侧菜单可以选择字体样式，下方会实时显示结果
也可以选择test all查看到所有样式结果

二、代码编写

主要函数

let string = function () {
      /* 这里放复制的字符图案(记得两边留出一个空格) */
}

 <script>
    function makeMulti (string) {
        let l = new String(string)
        l = l.substring(l.indexOf("/*") + 3, l.lastIndexOf`("*/"))`
        return l
    }
    let string = function () {
      /*       ___           ___           ___     
     /\__\         /\  \         /\__\    
    /:/  /        /::\  \       /::|  |   
   /:/__/        /:/\:\  \     /:|:|  |   
  /::\  \ ___   /::\~\:\  \   /:/|:|  |__ 
 /:/\:\  /\__\ /:/\:\ \:\__\ /:/ |:| /\__\
 \/__\:\/:/  / \/__\:\/:/  / \/__|:|/:/  /
      \::/  /       \::/  /      |:/:/  / 
      /:/  /        /:/  /       |::/  /  
     /:/  /        /:/  /        /:/  /   
     \/__/         \/__/         \/__/    @阿湫·*/
    }
    console.log(makeMulti(string));
    console.log(/* 其他信息 */);
</script>