Creating multiline strings in JavaScript

Multiline prophecies in ES6 and beyond

Utilizing ES6 template literals

Template literals, enclosed within backticks, give you the luxury of inserting even variables and expressions, just like that:

const name = 'Jack';
const intro = `Howdy, ${name}! 
Hope you are enjoying JavaScript.`;  // Hooray! No + operators required! 🥳


Adding the magic touch with Babel

Sure, not every JavaScript engine out there sips ES6 like a smooth cup of joe. Give them the best of ES6 features without making them feel antique. Transpile your code with Babel and your multiline strings will feel at home in any JavaScript engine.

Taking notes for the minifier

Your friendly neighborhood minifier might not be so friendly with your multiline constructs. Fear not! Using /*! in your comments tells the YUI compressor to keep its hands off your precious comments.

Crafting multiline strings for legacy code

Using array join

For a nostalgic take on multiline strings, consider array of lines joined with a '\n':

const multiStr = [
  "Line 1",
  "Line 2",
  "Line 3"
].join('\n');  // Arrays doing a conga line with '\n'. Who would have thought? 🕺


Concatenating strings

Dealing with older pre-ES6 code? Just concatenate your strings over new lines with \n:

const multiStr = "Line 1" +
                 "\nLine 2" +
                 "\nLine 3";  // It's like a string party. Everyone is invited! 🥂


Nifty tricks with multiline strings

Application of String.raw

Want to create template strings that turn a blind eye to escape sequences? Count on String.raw, the superhero of ES6:

const path = String.raw`C:\Development\profile\aboutme.html`;  // So raw, Gordon Ramsay approves. 👨‍🍳


Leveraging IIFE with toString()

Here's a string trick right out of Dumbledore's book. Use an IIFE with toString() to access multiline comments as strings. But be quick! Minifiers and style guides might be lurking around.

const multiStr = (function(){/*Line 1
Line 2
Line 3*/}).toString().split(/\n/).slice(1, -1).join('\n';  // I solemnly swear I am up to no good. ⚯͛


Formatting multiline strings

Controlling string indentation

Frustrated with excess indentation in multiline strings? Design a function like .removeIndentation() that snips the extra whitespace.

function removeIndentation(str) {
  // Implementation to banish leading whitespace from each line.
}


HTML and template literals

Throw in HTML into your JavaScript strings with the power of template literals. Or even better, use a templating library. Add that layer of security to your code sandwich.

CoffeeScript for some inspiration

Want a change of taste? Try CoffeeScript for a cleaner syntax. But remember, JavaScript's native multiline approach is like home-cooked food, warm, familiar, and efficient!