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 escape the carriage return, well, with the escape 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

• 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)