Template Literals and Tagged Templates

A blank billboard in Southport, UK

The ES6 spec blessed us with a new string superpower. Strings are already pretty lucky. Developers can use single quotes or double quotes to wrap around a string. (Some languages only get half that many options!) So what need is there for another (apparent) string wrapper?

Template Literals

Template Literals solve a couple thorny issues with traditional strings. Whether you wrap a string in single or double quotes, it’s still a static line of text.

Let’s create a variable called name and give it a string value.

const name = 'Miles Rausch';

Now, let’s create a variable called greeting that uses our name variable. Before template literals, we may have done this:

const greeting = 'Hello, ' + name; // 'Hello, Miles Rausch'

This is… fine. It’s not great, but it’s workable. I mean, for literally decades it was good enough, but it has its awkward moments. Like when you have a lot of interpolation you want to do:

const longGreeting = 'I wanted to say, "' + greeting + '." But I instead said, "' + greeting + ', my good fellow."'; // I wanted to say, "Hello, Miles Rausch." But I instead said, "Hello, Miles Rausch, my good fellow."

It works, but it’s not readable, and it’s very easy to get off by a quote and end up in a bad state.

Let’s rewrite the above example using template literals. Instead of a single or double quote, you use a backtick or grave accent character (`). Then wrap any variables in ${} (allowing some handy string interpolation). You’ll see below.

const longGreeting = `I wanted to say, "${greeting}." But I instead said, "${greeting}, my good fellow."`; // I wanted to say, "Hello, Miles Rausch." But I instead said, "Hello, Miles Rausch, my good fellow."

So much clearer! So much nicer! I can immediately see my variables from my static text. I can also use any quotes I want without worrying about nesting. Those interpolation blocks can allow any sort of JavaScript processing, too, so I could do something like ${3 + 4} to render 7.

Talk about super powers. Template literals also support multiple lines of text.

const multiLineGreeting = `Oh, hello there.

How are you?`

But wait, there’s more!

Tagged Templates

Template literals are very useful and long overdue. They save developers time and help prevent errors. However, there is another cool feature as part of this functionality.

Let’s say you wanted to encapsulate some string manipulation. Maybe you want an easy way to make a string uppercase and begin and end the string with exclamation marks. You can write a function:

function loud(input) {
    return `!! ${input.toUpperCase()} !!`;
}
const loudGreeting = loud('Hi, there'); // !! HI, THERE !!

This technique works just fine, but we can take advantage of the new tagged templates spec to improve readability. With tagged templates, you simply prefix the template literal with the name of the function and ensure your function follows a specific interface. Let’s rewrite the function and variable assignment using tagged templates.

function loud(inputArray) {
    return `!! ${inputArray[0].toUpperCase()} !!`;
}
const loudGreeting = loud`Hi, there`; // !! HI, THERE !!

We may have only saved two characters, but there’s more to this superpower. Did you notice that the input this time was an array? inputArray is an array of strings around each interpolation. In our simple example, we had no interpolation. If we had included interpolation, our function wouldn’t have been as useful, because we didn’t account for interpolation values.

const loudGreeting = loud`He said, "${greeting}"`; // !! HE SAID, " !!

Also passed into the function are all the interpolations, sent as parameters in the order they appear in the string. If your tag function has a highly specific use case, you can name these parameters. However, it’s usually better to use the ES6 rest parameter to bundle them into an array.

function tagFunction(inputArray, ...values) { ... }

Taking Templates Further

This separation allows for some interesting scenarios. Any time where you’d want to treat dynamic content differently from static content, a tagged template could come in handy.

Think translations. You want the static text in the string to get translated but the interpolated values to remain untouched. Tagged templates do this separation automatically for you and give you a nice syntax for using it. Here’s a completely unsophisticated Spanish translator:

function toES(toTranslate, ...values) {
  const dictionary = {
    'Hello': 'Hola'
  };
  
  return toTranslate.reduce((translation, item, index) => {
    const key = item.replace(/\s+/g, '');
    const newItem = item.replace(key, dictionary[key] || key);
    
    translation += `${newItem}${values[index] || ''}`;
    
    return translation;
  }, '');
}

const spanishGreeting = toES`Hello ${name}!`; // Hola Miles!

You don’t have to return just strings, either. Libraries like styled-components use the finesse of tagged template syntax to return styled React components. Creating a styled <Title /> component is as easy as:

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

<Title>Hello World!</Title>

Give template literals and tagged templates a try today!


PostCSS: A Dumb Name For an Awesome Thing

Bolstered by my reception at the South Dakota Code Camp, I updated and presented my PostCSS talk at dev.Objective() 2016, one of the best web development and CFML conferences in the states. I think it went well, despite my quickly expiring laptop.

You can view the slides on Slides.com.

You can browse the demo repository on GitHub.com.

You can learn more about my postcss-placehold plugin on GitHub.com.

Thanks to everyone who came!

Loading Baby Rausch…

You might be wondering what that strange progress bar is in the sidebar. It’s a Baby Progress Bar! It’s actually a little JavaScript that I put together. You give the script your baby’s due date and (optional) gender, and it creates an updating progress bar, showing just how much baby growing your baby has to do! Blue is for boys, pink is for girls, and a calming green is for genderless children.

I’ll put up a more technical write up later.