ES6 Template Literals, the Handlebars killer? - Keith Cirkel

I had a recent discussion with one of the awesome developers at the FT - @bjfletcher. We were looking at how viable it would be to replace a templating language, like Handlebars with ES6 Template Literals, in some manner. Ben suggested it'd be a good idea to turn our discussion into a post, and here we are - with a click bait title and everything.

So what are Template Literals? How can they do what a complex library like Handlebars does? Settle in, dear reader, and let's find out...

I've discussed ES6 here before - we looked at Symbols (you should read that, we'll be using Symbols today), Reflect and we looked at Proxies. Even more ES6 content will be coming too (tease tease). Another big part of ES6 was also these things called Template Literals. They serve as a bit of a fix for many things to do with Strings in ES6 land. So let's just have a quick rundown of their features:

ES6 template literals, as the name suggests, come with a new literal syntax. They use back ticks (` `) to denote the start and end (just like strings use quote marks (' ' or " ")). Within those back ticks, Template literals are parsed at runtime, to provide some new features.

Leave a Comment