JS中如何将ASCII艺术图片输入到控制台？

Question

我正在尝试在控制台中显示此 ASCII 图像：

_______                                       
\  ___ `'.            /|                 .--. 
 ' |--.\  \           ||                 |__| 
 | |    \  '          ||                 .--. 
 | |     |  '         ||  __        __   |  | 
 | |     |  | _    _  ||/'__ '.  .:--.'. |  | 
 | |     ' .'| '  / | |:/`  '. '/ |   \ ||  | 
 | |___.' /'.' | .' | ||     | |`" __ | ||  | 
/_______.'/ /  | /  | ||\    / ' .'.''| ||__| 
\_______|/ |   `'.  | |/\'..' / / /   | |_    
           '   .'|  '/'  `'-'`  \ \._,\ '/    
            `-'  `--'            `--'  `"

但是，我遇到了多个错误，因为我不知道您将如何输入它以使其在我激活代码时显示在控制台中。

Answer 1

使用模板文字在字符串中嵌入换行符。您需要转义字符串中的反引号。

console.log(`_______                                       
\  ___ \`'.            /|                 .--. 
 ' |--.\  \           ||                 |__| 
 | |    \  '          ||                 .--. 
 | |     |  '         ||  __        __   |  | 
 | |     |  | _    _  ||/'__ '.  .:--.'. |  | 
 | |     ' .'| '  / | |:\`  '. '/ |   \ ||  | 
 | |___.' /'.' | .' | ||     | |\`" __ | ||  | 
/_______.'/ /  | /  | ||\    / ' .'.''| ||__| 
\_______|/ |   \`'.  | |/\'..' / / /   | |_    
           '   .'|  '/'  \`'-'\`  \ \._,\ '/    
            \`-'  \`--'            \`--'  \`" `);

Answer 2

您可以使用模板字符串文字：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

可以使用反引号字符来完成，例如：

console.log(`%c
_______                                       
\  ___ \`'.            /|                 .--. 
 ' |--.\  \           ||                 |__| 
 | |    \  '          ||                 .--. 
 | |     |  '         ||  __        __   |  | 
 | |     |  | _    _  ||/'__ '.  .:--.'. |  | 
 | |     ' .'| '  / | |:/\`  '. '/ |   \ ||  | 
 | |___.' /'.' | .' | ||     | |\`" __ | ||  | 
/_______.'/ /  | /  | ||\    / ' .'.''| ||__| 
\_______|/ |   \`'.  | |/\'..' / / /   | |_    
           '   .'|  '/'  \`'-'\`  \ \._,\ '/    
            \`-'  \`--'            \`--'  \`" 
`, `font-family: monospace`);

你必须排列ASCII：

转义每个反引号，否则将终止字符串。
控制台使用的字体与 ASCII 图像（等宽）使用的字体不同，在 Chrome 中您可以设置字体，否则，您需要安排 ASCII 图像以适应控制台字体。

To view the font change, use the real console and not the one from Whosebug

Answer 3

您需要转义反引号字符和反斜杠字符。

const str = `_______                                       
\  ___ \`'.            /|                 .--. 
 ' |--.\  \           ||                 |__| 
 | |    \  '          ||                 .--. 
 | |     |  '         ||  __        __   |  | 
 | |     |  | _    _  ||/'__ '.  .:--.'. |  | 
 | |     ' .'| '  / | |:/\`  '. '/ |   \ ||  | 
 | |___.' /'.' | .' | ||     | |\`" __ | ||  | 
/_______.'/ /  | /  | ||\    / ' .'.''| ||__| 
\_______|/ |   \`'.  | |/\'..' / / /   | |_    
           '   .'|  '/'  \`'-'\`  \ \._,\ '/    
            \`-'  \`--'            \`--'  \`" `;
console.log(str);

Answer 4

您也可以只使用 figlet。确保首先使用 npm i figlet

安装它

const figlet = require("figlet")
figlet.text("Text", function (err, data){
 console.log(data)
})

上面的代码是一个将文本发送到模块“figlet”并以 ascii 艺术格式返回文本的函数。尝试更改“文本”以查看结果。

Answer 5

发现这个神奇的 online converter 可以用来转义 JavaScript 字符串

将粘贴的 ASCII 文本复制到 freeformatter，将转义字符串复制到 console.log("");

console.log("\r\n\u2591\u2588\u2588\u2588\u2588\u2588\u2557\u2591\u2591\u2588\u2588\u2588\u2588\u2588\u2557\u2591\u2588\u2588\u2588\u2557\u2591\u2591\u2588\u2588\u2557\u2591\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2591\u2588\u2588\u2588\u2588\u2588\u2557\u2591\u2588\u2588\u2557\u2591\u2591\u2591\u2591\u2591\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2591\u2591\u2591\u2588\u2588\u2557\u2591\u2591\u2591\u2591\u2591\u2591\u2588\u2588\u2588\u2588\u2588\u2557\u2591\u2591\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2591\r\n\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2557\u2591\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551\u2591\u2591\u2591\u2591\u2591\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2591\u2591\u2591\u2588\u2588\u2551\u2591\u2591\u2591\u2591\u2591\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2591\r\n\u2588\u2588\u2551\u2591\u2591\u255A\u2550\u255D\u2588\u2588\u2551\u2591\u2591\u2588\u2588\u2551\u2588\u2588\u2554\u2588\u2588\u2557\u2588\u2588\u2551\u255A\u2588\u2588\u2588\u2588\u2588\u2557\u2591\u2588\u2588\u2551\u2591\u2591\u2588\u2588\u2551\u2588\u2588\u2551\u2591\u2591\u2591\u2591\u2591\u2588\u2588\u2588\u2588\u2588\u2557\u2591\u2591\u2591\u2591\u2591\u2588\u2588\u2551\u2591\u2591\u2591\u2591\u2591\u2588\u2588\u2551\u2591\u2591\u2588\u2588\u2551\u2588\u2588\u2551\u2591\u2591\u2588\u2588\u2557\u2591\r\n\u2588\u2588\u2551\u2591\u2591\u2588\u2588\u2557\u2588\u2588\u2551\u2591\u2591\u2588\u2588\u2551\u2588\u2588\u2551\u255A\u2588\u2588\u2588\u2588\u2551\u2591\u255A\u2550\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551\u2591\u2591\u2588\u2588\u2551\u2588\u2588\u2551\u2591\u2591\u2591\u2591\u2591\u2588\u2588\u2554\u2550\u2550\u255D\u2591\u2591\u2591\u2591\u2591\u2588\u2588\u2551\u2591\u2591\u2591\u2591\u2591\u2588\u2588\u2551\u2591\u2591\u2588\u2588\u2551\u2588\u2588\u2551\u2591\u2591\u255A\u2588\u2588\u2557\r\n\u255A\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u255A\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551\u2591\u255A\u2588\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u255A\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u255A\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\r\n\u2591\u255A\u2550\u2550\u2550\u2550\u255D\u2591\u2591\u255A\u2550\u2550\u2550\u2550\u255D\u2591\u255A\u2550\u255D\u2591\u2591\u255A\u2550\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u255D\u2591\u2591\u255A\u2550\u2550\u2550\u2550\u255D\u2591\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u2591\u255A\u2550\u2550\u2550\u2550\u255D\u2591\u2591\u255A\u2550\u2550\u2550\u2550\u2550\u255D\u2591")

结果

░█████╗░░█████╗░███╗░░██╗░██████╗░█████╗░██╗░░░░░███████╗░░░██╗░░░░░░█████╗░░██████╗░
██╔══██╗██╔══██╗████╗░██║██╔════╝██╔══██╗██║░░░░░██╔════╝░░░██║░░░░░██╔══██╗██╔════╝░
██║░░╚═╝██║░░██║██╔██╗██║╚█████╗░██║░░██║██║░░░░░█████╗░░░░░██║░░░░░██║░░██║██║░░██╗░
██║░░██╗██║░░██║██║╚████║░╚═══██╗██║░░██║██║░░░░░██╔══╝░░░░░██║░░░░░██║░░██║██║░░╚██╗
╚█████╔╝╚█████╔╝██║░╚███║██████╔╝╚█████╔╝███████╗███████╗██╗███████╗╚█████╔╝╚██████╔╝
░╚════╝░░╚════╝░╚═╝░░╚══╝╚═════╝░░╚════╝░╚══════╝╚══════╝╚═╝╚══════╝░╚════╝░░╚═════╝░

JS中如何将ASCII艺术图片输入到控制台？

How do you input an ASCII art image into the console in JS?

javascript

ascii