Template Literals are what we used to call “Template Strings” used for string interpolation with embedded expressions. The features exists in other languages such as python and ruby for a long time and was first introduced to javascript in ECMAScript 6. Using template literals we can drop the ugly strings concatenations all together and use when we have embedded expressions and line breaks. Basic Usage The most common usage is to build a string composed of strings and values calculated from expressions. To embed an expression in a string all we need to do is to add the expression with curly brackets like . ${expression} For example, to generate a localised date prepend with text we can write the following: `Today is ${new Intl.DateTimeFormat('en-US').format(new Date())}` Advanced Usage There is more to the feature than strings and expressions combined together. We can build the end result by implementing a which, given the strings and values of of the expression, compose the end result. Tag Function Tag functions is another tool allows to extract the logic of building strings to a function. Tag function can being used for HTML escaping, localisation, tagging, translations, etc. We use tag function by calling it before the template literal expression, for example where fn is the tag function. fn`Today is ${new Date()}` The Implementation A tag function interface looks like: function fn(strings, ...values): string Where is an array of the strings separated by the expressions and the are the expressions values. For example executes fn as . strings values fn`Today is ${today} and Tomorrow is ${tomorrow}` fn(['Today is ', ' and Tomorrow is '], '6/23/2018', '6/24/2018') The tag function implementation should always return a string considering and For example, to get a localised without localised it before we can implement a tag function: strings values. fmtDate function fmtDate(strings, date) {const str0 = strings[0];const str1 = strings[1];const strDate = new Intl.DateTimeFormat('en-US').format(date);return `${str0}${strDate}${str1}`;} fmtDate`Today is ${new Date()}`; // “Today is 6/23/2018” To take it one step further and localised all of the dates: function fmtVar(v) {return (v instanceof Date) ?new Intl.DateTimeFormat('en-US').format(v) : v;} function fmtString(strings, ...values) {return values.reduce((acc, v, idx) =>acc + fmtVar(v) + strings[idx + 1], strings[0]);} fmtString`Today is ${today} and tomorrow is ${tomorrow}`;// “Today is 6/23/2018 and tomorrow is 6/24/2018" Notice that, in the example above, is a general formatting function that can be used to format anything using which format a parameter by its type. We can use this combination to format any variables as we want. fmtStrings fmtVar Existing Raw Data Implementation The common usages of tag functions is getting the raw data out of template string. For example to actually result with “first second” without breaking a line. We can use the static method which does exactly this. first ${'\n'} second String.raw String.raw`first ${'\n'} second`; // "first \n second" To Conclude Template literal can be a shotgun when handling strings, not only for expressions but also to compose more complexed string. Translations, localisations and more can be a good usage for this tool. It can even be used as a templating engine, I know Polymer is using it when creating a component template inline in the component class providing a function. html`<template>` On the other hand, template literal should be used very carefully. The tag function usage and implementation is not that straight forward and can get unpredictable and hard to understand. Use it as another tool in the toolkit.
