Template Strings

Depedency free and easy way to use ES6 template literals with JSON, just like you hoped they'd be in the real specification!

The method takes 2 arguments, template and data. The data will be available on this in the template.

Example template;

Example data: { name: 'World' }

Note: The "name" property of the JSON object is refered to as this.name in the template string.

Usage example (Node);

``
String.template = require('template-strings');

const template = '

console.log(html);
`

Usage example (Node ESM);

`
import stringTemplator from 'template-strings';

const template = '

console.log(html);
`

Usage example (Browser ESM);

`
import stringTemplator from 'https://unpkg.com/template-strings?module';

const template = '

document.body.appendChild(div);
`

( Live demo: https://codepen.io/enjikaka/pen/wRNNpr?editors=0010 )

Why?

To get modular and reusable templates with ES6 template litterals. The template variable in the
example above could have easily been imported from a collection of templates, a HTML-file or just
about anything.

The "vanilla" way of doing this, with the angled quotes, required you to define the variables
before the template. Here that limitation is gone. You can safetly fetch you data and grab your
template and merge them together.

Where does this work?

This will work in both node and in the browser.

More examples

$3

`
String.template = require('template-strings');

const menuItems = [
'Home',
'About',
'Portfolio',
'Contact'
];

const menuItemTemplate = '

*/
`

$3

`
const fetch = require('node-fetch');

String.template = require('template-strings');

const url = 'https://api.saoirse.audio/track/tidal/66522953';
const mediaItemTemplate = '${this.artist} - ${this.name}';

fetch(url).then(response => response.json())
.then(json => String.template(mediaItemTemplate, json))
.then(html => console.log(html));

/ Result: Eva Weel Skram - Selmas sang (fra Snøfall) /
``