At my workplace we have to write code that works in IE8+, which means no ES6 goodness. I like the ease of ES6 template literals and so I ran up this tiny inline-function that takes a template string and returns it with the tokens populated by contextually-available variables, or the result of an expression. It uses eval() to do the magic, so some sanitising might be advised depending on your code scenario. Comments welcome on the pen below.

CodePen

Both together. An earlier version of the framework we develop at our team uses handlebars as its default templating engine. I could do

  `<div class="${options.classprefix}popup">` +
    `<h1 class="${options.classprefix}popup-links">${options.modalTitle}</h1>` +
    `<div class="${options.classprefix}pop-links">` +
       `${allTheLinksHTMLString}` +
    `</div>` +
  `</div>`

Both together helped me write markup very similar looking to jsx syntax :D

+1 for @Kleo use right tool for the right job.

With ES6 actually you now can have simple vanilla views folder:

// views/alert.js
export default data => `<div class="alert ${data.type ? data.type : 'alert-info'}">
    ${data.message}
</div>`;

// components/alert.js
import tpl from '../views/alert.js'

export const Alert = {
    render(data) {
        return tpl(data);
    }
}

Words cannot describe my love for template literals.

I would add a third option - both. There are cases where using template literals is preferred than string concatenation and vise versa.

For single line strings, where one needs to concatenate a string with a variable, using template literal is recommended:

const greeting = `Hello, ${name}, the weather outside is ${current_weather}.`;
const greeting = 'Hello, ' + name + ', the weather outside is ' + current_weather + '.';

The second example is much more error-prone than the ES6 one, because of the "unpredictable" whitespaces. Also, its more cleaner and readable in my opinion.

In the template literal all characters are significant so leading whitespaces on a new row are not ignored, meaning:

const htmlTemplate = 
    `<h2>Weather condition</h2>
     <p>The weather today will be cloudy</p>`

"2-years ago" me will though that the variable will output the following result :

<h2>Weather condition</h2>
<p>The weather today will be cloudy</p>

Well, it won't. The result unfortunately will be:

<h2>Weather condition</h2>
     <p>The weather today will be cloudy</p>

The template literal won't ignore the whitespace characters and will output the string as is. I learned this the hard way, while testings. My tests broke for no reason when I changed the old ES5 code with its ES6 equivalent. Silly me!

So, I still use string concatenation for multiline strings (with some small exceptions), because the behavior is much more predictable and template literals for single line strings, where I need embedded expressions.

Depends. I prefer string concatenation for one-liners, but I really love template strings + literals for multi-line strings.