Here’s a list of my best web development tutorials.

Complete CSS flex tutorial on Hashnode.

Ultimate CSS grid tutorial on Hashnode.

Higher-order functions .map, .filter & .reduce on Hashnode.

Follow me @ Twitter, Instagram & fb to never miss premium articles.

You may already know that ES6 introduced creation of Template Literals by using the `` quotes (backtick character) located on the tilde key.

To use Template Literals you have to use the backtick quotes instead of single or double quotes (which would not work with template literals.)

let A = 1;let TL = `Hello there, include variable ${A} in text.`;console.log(TL); // "Hello there, include variable 1 in text"

But it’s possible to combine template literals with a custom-written function created specifically to work in the context of a string literal. Hence, this is where the concept of tagged template literal concept comes from.

The “tag” is the function name.

It should precede the template literal. Here are a few examples:

let A = 1;
let age = 7;
F`${A}`; // Returns anything you want
catage`Your cat is ${age} ywars old.`; // Returns anything you want
dog`Your dog has ${4} legs.`; // Returns anything you want

The functions F, catage and dog are your standard JavaScript functions.

Note that there is no (), the function call is still executed just with the ``!

The return value of such a function can actually be anything you want.

The rest of this tutorial will walk you through the creation of a function that converts the original TL string into a more sophisticated return value.

This syntax may appear puzzling, especially to pre-ES6 coders.

Never before had we executed a function without using parenthesis ().

Never before had we passed arguments to a function via Template Literals.

Certainly, never before had we returned the value that rewrote the string completely with our own output… that had nothing to do with the template literal that was used (return value is defined by you to be anything):

function A() { return 'Rewritten.'; }A`Hello there.`; // "Rewritten."

Whatever the tagged function returns will be the replacement of the actual template literal provided.

In this case `Hello there.` will be rewritten to `Rewritten.`.

You can pass original string back to the return value. But there is a catch.

You can’t simply take it & pass it back as return value. Because this type of function breaks down TL into parts separated by strings and TLs nested in it.

The key is writing a function that accomplishes something useful. What it is, is entirely up to you and what you’re trying to do.

In this following example we’ll explore how to create a basic tagged function for using together with template literals.

Such a function can be defined by two arguments: strings and …values (using the … rest “operator.”)

// Let's create a function F, as a special function
// to be used to *rewrite Template Literals:
function F(strings, ...values) { let result = ``;

// Receive **parts of the Template Literal in "strings"
// and iterate them, index) => {
// Note: "...values" will hold ${A}, ${B}, and ${C} or
// list of values enumerating all Template Literals (${A},
// ${B}, ...) from the TL string.
// Get TL number at current index, but always avoid last
// one, which will always be 'undefined':
let N = (index <= values.length - 1) ? values[index] : ``; // Rewrite digits to strings -- this is one of the benefits
// of using Template Literal-based functions. That is...
// reformatting the input:
N == 1 ? N = "One" : '';
N == 2 ? N = "Two" : '';
N == 3 ? N = "Three" : '';
// Combine string and numbers and add to the tail of the
// running string:
result += value + N; }); return result;

This function will make a lot more sense in a moment.

Basically all it does is rewrite variables 1, 2 and 3 into strings “One”, “Two”, and “Three”. Internally inside the function it is accomplished by iterating strings values (using .map method) and re-combining them with …values

// Let's create some variables    let A = 1;
let B = 2;
let C = 3;

Syntax F`${A}` executes the function F.

Putting Template Literal (`Hello ${A} and ${B}`, for example) *after function name (F, in this case) will trigger the function call, just like F(), or would.

The difference is that ${A}, ${B}, and ${C} are passed as “…values” (see function F definition above) and the … dots are the rest “operator”. It grabs all of the Template Literals, not just 1.

Our setup is ready, let’s call the tagged template literal function F and see what happens:

F`Numbers are ${A}, ${B} and ${C}.`;F returns = "Numbers are One, Two and Three."

The syntax above where you have F (name of the function) right before a template literal will execute that function and pass the TL values to the function as arguments.

I am sure more advanced use-cases are possible. But this is at the very basic, how Tagged Template Literals work in JavaScript.

JavaScript School Bus

Want to learn more about JavaScript? Hop on the JavaScript School Bus!

Image for post by @js_tut (Twitter)

For more tutorials you can visit my JavaScript Tutorial Site / See you there!

Issues. Every webdev has them. Published author of CSS Visual Dictionary few others…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store