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

Question

I'm trying to make this ASCII image shown in the console:

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

However, I'm getting multiple errors since I do not know how you would input this to make it show up in the console when I activate the code.

Answer 1

Use a template literal to embed newlines in the string. You'll need to escape the backticks that are in the string.

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

Answer 2

You could also just use figlet. Make sure to install it first using npm i figlet

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

The code above is a function to send text to the module "figlet" and get the text back as ascii art. Try changing the "text" to see your outcome.

Answer 3

You can use the template string literal: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

It can be done using the backtick charactere, example:

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

You must arrange the ASCII:

• escape every backticks, otherwise it will terminate the string.
• font used by the console is different than the one used by the ASCII image (monospace), in Chrome you can set the fonts, otherwise, you'll need to arrange the ASCII image to fit the console font.

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

Answer 4

You need to escape both the back tick characters and the back slash characters.

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

Answer 5

Found this amazing online converter which can be used to escape JavaScript string

Copy paste ASCII text to freeformatter, copy the escaped string to 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")

Result

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

Answer 6

---

( ) ( ) (_ ) /' ) ( ) | | | | _ _ | | | ( ___ _ _ _ __ | | | _ | /' ) | | |,__)/'___) /'_ ) | | |,__)/'___) /'_ ) | | |,__)/'___) /'_ )( ' )/' | | | | |( (_| | | | | | ( (___ ( (_| || | ( (_| | (_) (_) | | | | |( (_| | | | | | ( (___ ( (_| || | ( (_| | (_) (_) | | | | |( (_| | | | | | ( (___ ( (_| || | ( (_| | (_) (_) _ , )( )( ) \____) _ , )( ) `_ , )