3

Template literals make string manipulation much easier. However:

  1. What can and what can't they do in comparison to template libraries such as mustache and handlebars?
  2. I found it difficult to find an answer to these questions: Can they handle conditions? Can they handle loops? Can they handle functions?
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Ben Carp
  • 24,214
  • 9
  • 60
  • 72
  • The best way to find your answer is the read the [documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals). – m_callens Apr 27 '17 at 14:33
  • I checked the MDN and Microsoft's JS documentation. Both don't refer to this topic at all. They have no info about the ability to use template literals with conditions, loops, and functions. – Ben Carp Apr 27 '17 at 14:46
  • 1
    What kind of "condition" are you talking about? Template literals can contain any single line expression that returns a value within the `${...}` – m_callens Apr 27 '17 at 14:47
  • Aha. This is the answer I was looking for. I couldn't understand why it can handle some functions such as map an inline conditinos, but not 'regular conditions'. Anyway, Your note and vote suggest suggest I didn't take a look at the documentation, or search the web, which are not the case. – Ben Carp Apr 27 '17 at 15:06
  • [ES6 tagged templates practical usability](http://stackoverflow.com/q/31590975/1048572), [template literals are string interpolation, not "templates"](http://stackoverflow.com/a/29201948/1048572) – Bergi Apr 29 '17 at 09:50
  • I also find template literals questionable. – John Smith Apr 08 '18 at 09:02

3 Answers3

4

The name is a bit ambiguous, but template literals do not replace template engines. They role is only to provide a more convenient syntax to work with strings. In fact, the objective was to bring string interpolation to core JavaScript like CoffeeScript did, plus the possibility of clean multiline strings.

This code...

let foo = 'Foo',
    bar = 'Bar',
    baz = 'Baz';

console.log(`${foo} ${bar} ${baz}`);

... is easier to maintain than this one:

var foo = 'Foo',
    bar = 'Bar',
    baz = 'Baz';

console.log(foo + ' ' + bar + ' ' + baz);

Moreover, this code...

let str = `Foo
Bar
Baz`;

... is more readable than this one:

var str = 'Foo\n\
Bar\n\
Baz';

Even if they do not replace template engines, template literals may be useful to preprocess strings (see tagged template literals). With this functionality, we can for instance escape strings with a custom htmlentities function:

function htmlentities(raw) {
  let str = raw[0];
    
  return str.replace(/&/g, '&')
            .replace(/>/g, '>')
            .replace(/</g, '&lt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&apos;');
}
    
console.log(htmlentities`&><\"\'`);

Under the hood, tagged template literals are syntactic sugar for a well-known string manipulation practice embodied by sprintf in many programming languages:

let foo = 'Foo',
    bar = 'Bar';

function htmlentities(raw, ...args) {
  console.log('String pieces:');
  console.log(raw);
  console.log('String arguments:');
  console.log(args);
  
  return 'Cool, isn\'t it?';
}

console.log(htmlentities`Hello, ${foo} and ${bar}!`);
Badacadabra
  • 8,043
  • 7
  • 28
  • 49
1

There is a fundamental difference between the ES6 template literals and a template library such as handlebars in that ES6 template literals are just part of the language, whereas a templating language/engine is a library that provides a higher level API that is useful for making big, complicated strings, like HTML pages without having to get involved manipulating strings in JavaScript on a low-level. In other words, they solve different problems.

ES6 template literals can more accurately be thought of as syntax sugar for doing things like var str = "This is some text with "+someContent+" inserted into it." or "This is some text with "+someFunction(param, param2)+" inserted into it."

On the upside, any logic you could do in JavaScript, you can do with a template literal, and on the downside, it doesn't give you a higher level API. It just makes JavaScript string handling a little bit smoother, like it is in some other languages like Python and Ruby.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Rafael Kennedy
  • 964
  • 5
  • 16
0

A JavaScript templating language is going to offer you a different set of expressions and options compared to the standard string literal. They are not really comparable. A templating language may use string literals/template strings within expressions - but string literals are just regular JavaScript.

var message = "Hello, " + name + ". How are you doing today? The room is " + (width * height) + " square feet.";

VS

var message = `Hello, ${name}. How are you doing today? The room is ${width * height} square feet.`;

So, math - and all that stuff a * b etc. works the same way - but just offers you a more versatile syntax.

A handlebars helper (as an example piece of a 'templating language') is backed by a registered set of functions / either from the standard library or build on top of it.

// some data

{
  people: [
    {firstName: "Yehuda", lastName: "Katz"},
    {firstName: "Carl", lastName: "Lerche"},
    {firstName: "Alan", lastName: "Johnson"}
  ]
}

// registering a 'helper'

Handlebars.registerHelper('list', function(items, options) {
  var out = "<ul>";

  for(var i=0, l=items.length; i<l; i++) {
    out = out + "<li>" + options.fn(items[i]) + "</li>";
  }

  return out + "</ul>";
});

// using the helper

{{#list people}}
  {{firstName}} {{lastName}}
{{/list}}

or something like this from a library

{{moment-from-now (now interval=1000)}} // interval is in ms`

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

sheriffderek
  • 8,848
  • 6
  • 43
  • 70