Sandrina Pereira Sandrina Pereira - 1 month ago 9
Javascript Question

ES6 Template Literals - remove \n from the string

I'm changing my multiline variables to

Template Literals
and it's amazing, but then I noticed that the indents I do are converted (minified) into
\n
with the indentation I did on the original code. How can I avoid that?

Ex:

var $div = $(`<div class='proj' id='projects'>
<div class='bot-nav'>${txt}</div>
</div>`);


Is converted to:

var $div = $("<div class='proj' id='projects'>\n <div class='bot-nav'>"+txt+"</div>\n </div>");


And I want this:

var $div = $("<div class='proj' id='projects'><div class='bot-nav'>"+txt+"</div></div>");


Is there any fast/easy way to do this?

Answer

While using .replace (like suggested in other answers) will work, it is not the cool new shiny way of doing it ;)

I think what you are looking for is a literal tag function (aka "Tagged Templates"), introduced in ES2015.

There are a bunch of them here:

https://github.com/declandewet/common-tags

And you would probably want oneLine (or oneLineTrim):

oneLine`
  foo
  bar
  baz
`)
// "foo bar baz"