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 t

Solution 1:

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"

Note: oneLine, obviously, uses replace internally.

Solution 2:

let literal = `template     literal
               string so many holes`;

literal.replace(/\s+/g, ' ');

This will replace one or more spaces with one space.

Solution 3:

You can use the String.prototype.replace() method to remove all new lines and spaces after them:

var $div = $(`<div class='proj' id='projects'>
                 <div class='bot-nav'>${txt}</div>
           </div>`.replace(/\n\s+/g, ''));

Solution 4:

To remove leading and trailing whitespace you'd use .replace

To remove the newlines, you can split/join

var $div = $(`<div class='proj' id='projects'>
             <div class='bot-nav'>${txt}</div>
       </div>`.replace(/^\s+|\s+$/gm, '').split('\n').join(''));

Or make a function

function someFunctionName(str) {
    return str.replace(/^\s+|\s+$/gm, '').split('\n').join('')
}

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