Template Strings ES6 prevent line breaks

Question

I have a long string, which I build using ES6 template strings, but I want it to be without line breaks:

var string = `As all string substitutions in Template Strings are JavaScript
              expressions, we can substitute a lot more than variable names.
              For example, below we can use expression interpolation to 
              embed for some readable inline math:`

console.log(string);

Result:

As all string substitutions in Template Strings are JavaScript
expressions, we can substitute a lot more than variable names.
For example, below we can use expression interpolation to
embed for some readable inline math:

My expectations:

As all string substitutions in Template Strings are JavaScript expressions, we can substitute a lot more than variable names. For example, below we can use expression interpolation to embed for some readable inline math:

Answer 1

This is insane.

Almost every single answer here suggest running a function runtime in order to well-format, buildtime bad-formatted text oO Am I the only one shocked by that fact, especially performance impact ???

As stated by @dandavis, the official solution, (which btw is also the historic solution for unix shell scripts), is to espace the carriage return, well, with the espace character : \

`foo \
bar` === 'foo bar'

Simple, performant, official, readable, and shell-like in the process

Answer 2

A line break is a line break... If you produce them manually, I find very expectable that you get them during run-time.

BTW, I find three workarounds for now:

1. Configure your IDE or code editor to do word wrap so you won't need to add line breaks in your code if you don't need them: your editor will break your code in two or more lines if each code sentence goes beyond configured maximum characters.

2. Remove line breaks with String.prototype.replace:

var string = `As all string substitutions in Template Strings are JavaScript
expressions, we can substitute a lot more than variable names.
For example, below we can use expression interpolation to
embed for some readable inline math:`.replace(/\n/gm,"");

Caution: here you're running a function runtime to format your buildtime code, which might look like an anti-pattern, and have performance impact

3. Perform these code line breaks using concatenations:

var string = `As all string substitutions in Template Strings are JavaScript`
              + `expressions, we can substitute a lot more than variable names.`
              + `For example, below we can use expression interpolation to` 
              + `embed for some readable inline math:`;

In my case, I would go with #1 option.

Answer 3

If you have ES6, you can use tags. For instance, the stripIndent tag from the common-tags library:

Install via:

npm install common-tags --save

Require via:

const stripIndent = require('common-tags/lib/stripIndent')

Use as:

stripIndent`
  As all string substitutions in Template Strings are JavaScript
  expressions, we can substitute a lot more than variable names.
  For example, below we can use expression interpolation to
  embed for some readable inline math:        
`

Edit: As mentioned in the comments, you likely need to pick the: const oneLine = require('common-tags/lib/oneLine') tag for your desired outcome.

More info on the aforementioned common-tags link as well as on this blog

Answer 4

I personally prefer the look of joining an array instead:

var string = [
  `As all string substitutions in Template Strings are JavaScript`,
  `expressions, we can substitute a lot more than variable names.`,
  `For example, below we can use expression interpolation to`,
  `embed for some readable inline math:`
].join(' ');

Answer 5

• Either configure IDE to make wraps and use template string 1-liner, as in your 1st code snippet.

• Either use \ escape literal char just before the line breaks.

  Example:

  const string = `1st line\
  2nd line\ 
  3rd line`; 
  

  But it will not save you from issues with space-aligning.

• Either use old-school ES5 concatenation with '+'.

  Example:

  const string = '1st line' + 
                 '2nd line' + 
                 '3rd line'; 
  

• Either use hack with template empty string var ${''}:

  Example:

  const string = `1st line${'' 
                 }2nd line${'' 
                 }3rd line`;
  

The 1st way is much more better, cause:

• less symbols (size aspect)
• no runtime operations (perfomance aspect)

Answer 6

In ES6, I prefer using a combination of the two top answers here (\ in combination with .replace()). The benefit of combining the replace function with the escape character means you can keep your codeblock consistently formatted with the rest of your code.

/\s{2}/g is a regular expression selecting any instance of two or more back-to-back spaces.

const myMessage = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id urna \
    ligula. Suspendisse lobortis ex ut vestibulum venenatis. Donec imperdiet ante odio, \
    nec malesuada diam tristique eget. Lorem ipsum dolor sit amet, consectetur adipiscing \
    elit. Cras in vulputate tellus.`
  .replace(/\s{2,}/g, "");

This outputs a plain, unbroken string.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id urna ligula. Suspendisse lobortis ex ut vestibulum venenatis. Donec imperdiet ante odio, nec malesuada diam tristique eget. Lorem ipsum dolor sit amet, consectetur elit. Cras in vulputate tellus."