Template Strings ES6 prevent line breaks

JavascriptEcmascript 6Template Strings

Javascript Problem Overview


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:

Javascript Solutions


Solution 1 - Javascript

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

Solution 2 - Javascript

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 = 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,"");
.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

  1. Perform these code line breaks using concatenations:

var string = 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:;

+ var string = 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:;

+ 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:;

+ var string = 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:;

+ var string = 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:;

+ 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:;

+ For example, below we can use expression interpolation to
+ embed for some readable inline math:;

+ var string = 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:;

+ var string = 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:;

+ 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:;

+ var string = 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:;

+ var string = 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:;

+ 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:;

+ For example, below we can use expression interpolation to
+ embed for some readable inline math:;

+ embed for some readable inline math:;
;

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

Solution 3 - Javascript

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

Solution 4 - Javascript

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

Solution 5 - Javascript

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(' ');

Solution 6 - Javascript

For paragraphs, you can use the \s+ regex to replace white space runs with a single space so it will work for line breaks as well as the indentations. So, in your case, just add .replace(/\s+/gm, ' ') at the end.

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(/\s+/gm, ' ');

console.log(string);

Solution 7 - Javascript

Although it's not the typical usage for template strings, it's worth mentioning. You can just make use of the string interpolation, it can be as simple as this


const str = `some long text on ${
    "multiple" } lines without any extra ${
    "spaces" } or line breaks and readable.`;

console.log(str);
// "some long text on multiple lines without any extra spaces or line breaks and readable."

Solution 8 - Javascript

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."

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questiondim0_0nView Question on Stackoverflow
Solution 1 - JavascriptCyril CHAPONView Answer on Stackoverflow
Solution 2 - JavascriptMatías FidemraizerView Answer on Stackoverflow
Solution 3 - JavascriptkvzView Answer on Stackoverflow
Solution 4 - JavascriptEugene MihaylinView Answer on Stackoverflow
Solution 5 - JavascriptjaybeeView Answer on Stackoverflow
Solution 6 - JavascriptL. HolandaView Answer on Stackoverflow
Solution 7 - JavascriptShaaerView Answer on Stackoverflow
Solution 8 - JavascriptMDev20View Answer on Stackoverflow