Multi-line strings preserving readability

Question

I know I can have multi-line strings in JS with backticks, however, it also picks up spaces as part of the string. This is expected behavior, but I'd like them to be indented for better readability. Is this possible using backticks, or will I need to use concatenation.

Thanks in advance.

 const testFunc = () => { console.log(`This is line One, this is line Two`); //Outputs line by line. } testFunc(); const testFuncTwo = () => { console.log(`This is line One, this is line two`); //Cleaner, but the second line starts after the indentation. } testFuncTwo();

Answer 1

You can use an ES6 tag to remove indentation from your multi-line string.

In this example I'm using the dedent npm package , but there are several others that do the same :

 // Commented-out for browser compatibility; un-comment for node.js // const dedent = require('dedent') function usageExample() { const first = dedent`A string that gets so long you need to break it over multiple lines. Luckily dedent is here to keep it readable without lots of spaces ending up in the string itself.`; const second = dedent` Leading and trailing lines will be trimmed, so you can write something like this and have it work as you expect: * how convenient it is * that I can use an indented list - and still have it do the right thing That's all. `; const third = dedent(` Wait. I lied. Dedent can also be used as a function; `); return first + "\n\n" + second + "\n\n" + third. } console.log(usageExample())

 <script src="https://unpkg.com/dedent@0.7.0/dist/dedent.js"></script>

Answer 2

Unfortunately there isn't a way to automatically handle that. However, there's also the option of string concatenation trickery:

const src = [
    '// updated at build time by the CI',
    `export const ${key} = '${value}';`
  ]
    .join('\n');

or

const src = [
    '// updated at build time by the CI',
    `export const ${key} = '${value}';`
  ]
    .map(line => line + '\n')
    .join('');

Answer 3

What you are asking for is not possible. Leaving out the indent creates a visual mess. So you would have to go with concatenation if you want to split it up in a better formatted way. However, editing single lines becomes a pain once you have lines in the middle that have effects on all following lines in both cases anyway. Also both variants make text less searchable. That's why the Airbnb JavaScript Style Guide ditches both completely.

Excerpt from the relevant rule :

// bad
const errorMessage = 'This is a super long error that was thrown because \
of Batman. When you stop to think about how Batman had anything to do \
with this, you would get nowhere \
fast.';

// bad
const errorMessage = 'This is a super long error that was thrown because ' +
  'of Batman. When you stop to think about how Batman had anything to do ' +
  'with this, you would get nowhere fast.';

// good
const errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';

Ideally you want your IDE or editor to handle displaying large strings for you.

For a line break simply use \n in your strings where you need them.

Depending on your specific problem you could also solve this by using arrays, ei each element represents a line, and join them with \n s. When it comes to formatting this the same rules as above apply.