Utilize a repository of reusable ES6 template literals
The Template Literals introduced with ES6 are very useful to deal with multiline strings, because they support embedded expressions. Gone are the days of endless string concatination or replacing variables in a string by using RegEx.
Instead of…
1 | var url = ... |
… you can write:
1 | var url = ... |
It’s much cleaner and easier to handle, as you can copy your needed HTML right into your code and surround it by backtick (!) characters. Insert your variable placeholders (expressions), indicated by a dollar sign and curly braces, and you are done.
But there is one “restriction”, you have to be aware of: the interpolation (substitution of the expressions) is done at declaration time and not at runtime. You can’t define your literals seperatly, take one and make your substitution as you need it, like you would do with Handlebars or other templating engines. Therefore the name template literals is a bit misleading. But … there is a way to achieve this anyway…
Tagged Templates
Beside Template Literals, ES6 introduced Tagged Templates (exact: Tagged Template Literals). These tags are functions, which allows you to parse a Template Literal. Definition is like this:
1 | function myTag(literals, ...expressions) { |
You can use these tags by prefixing you literal:
1 | myTag`Hello ${firstName} ${lastName}!` |
Using Tagged Templates to build a template repository would mean, you have to write one tag function for every template … doable, but time consuming.
Dynamic Tag Function
To avoid this, we can write a universal tag function, which utilizes the Function constructor, to create the tag function dynamically:
1 | function fillTemplate(templateString, templateVars) { |
Don’t use this approach on user inputs as expressions, to avoid XSS!
Let’s see an example…
Given is a tiny web app with the following structure:
1 |
|
1 | import { App } from "./app.js"; |
1 | class App { |
What we want to do now, is to load some images into the main
element, by using a more or less complex element structure:
1 | <div class="photo"> |
To separate our templates from the main code, we create a template module, which contains the dynamic tag function from above and a photo
template we want to use in our app
1 | class Templates { |
The template retrieves a data
object, with the values of the defined expressions, and calls the dynamic tag function on the literal template.
This we can use now in our app code:
1 | //Import Template module |
See it live at codesandbox.io.
More Info
- Stackoverflow: Can ES6 template literals be substituted at runtime (or reused)?
- Github/Adelphos: ES6-Reuseable-Template
You can interact with this article (applause, criticism, whatever) by mention it in one of your posts, which will also be shown here as a Webmention ... or you leave a good old comment with your GitHub account.
Webmentions
No Webmentions yet...
In case your blog software can't send Webmentions, you can use this form to submit me a mention of this article...
Comments