ES6 Content Literals

The Data Storage custom Drupal module uses Javascript to dynamically generate HTML to present a variable number of questions and services. Writing HTML is Javascript has always been pretty clunky, full of hard to read expressions like this:

"<th class='service service-"+servicelist[i].id+"'>"+servicelist[i]["title"]+"</th>"

For heavier template lifting, I’ve been using the Mustache Javascript library.  Templating libraries like Handlebars (which I use in the Board of Trustees project)  or Mustache help hold down the punctuation clutter, but we still have backslashes to continue lines and have to keep track of the extra Javascript library:

$.Mustache.add("services-template",
        "{{#services}}\
        <div class='service-panel' id='service-{{id}}' >\
            <h4 class='service-title'>{{title}}</h4>\
            <p>{{ field_data.field_brief_description.value }}</p>\
        </div>\
        {{/services}}"
    );

Now, for the first time there is templating support right in the ES6 specification.  The first example above would become:

`<th class='service service-${servicelist[i].id}'>${servicelist[i]["title"]}</th>`

with variables interpolated between ${   } characters and the whole expression enclosed between backticks.   Furthermore, expressions within backticks can include carriage returns, so rendering the services as above would look something like this (given an array of service objects called services)

service_divs = services.map(function (s) {
        `<div class='service-panel' id='service-${s.id}' >
              <h4 class='service-title'>${s.title}</h4>
              <p>${ field_data.field_brief_description.value }</p>
        </div>`
});

which I think is a pretty good improvement.  Without having to load a templating library, I’ll be using template literals a lot to streamline HTML and other string construction in Javascript. 

See: https://www.keithcirkel.co.uk/es6-template-literals/

Here is the  browser compatibility guide:  https://kangax.github.io/compat-table/es6/