JavaScript Template Literals

Template literals are a JavaScript feature introduced in ES2015 (ES6) that enhances working with strings and adds new interesting constructs used by many popular libraries such as GraphQL and styled-components. The syntax is straight forward and instead of regular double or single quotes, template literals are enclosed by `backticks`.

Variable and expression interpolation

Instead of a regular string concatenation, they contain placeholders that are indicated by a dollar sign and curly braces ${…}. This drastically improves your code readability and allows for easy interpolation of variables as well as expressions into strings:

const string = "John";

const newString = `${string} Doe`; // John Doe

For expressions:

const string = "John";

const name = () => string;

const newString = `${name()} Doe`; // John Doe

Multiline strings

You can now easily write multiline strings without the use of \n. Creating a new line is as easy as pressing enter with no special characters. Everything is shown exactly as it is typed so keep in mind the use of spaces and indentation:

const string =
  "This is the first line\nThis is the second line \n    This is the third indented line";

const newString = `This is the first line
This is the second line
    This is the third indented line`;

Both resulting in:

"This is the first line
 This is the second line
    This is the third indented line"

Tagged template literals

When we put a custom handler function before the template literal we get tagged templates. This means that anything inside the backticks will go through that handler function before becoming a string. The way the function gets called is quite straightforward as we can see in the example:

const tagFunction = (strings, ...values) => {
  console.log(strings); // ["This is number ", " and this is number ", ""]
  console.log(values); // [1, 2]
};

tagFunction`This is number ${1} and this is number ${2}`;

As we can see the first value is an array of string parts of the template literal that are divided by ${…} placeholders and the rest of the arguments are the values inside placeholders that we put in an array using the rest operator.

This feature allows for some really nice use cases with popular libraries such as styled-components for React where we can set css values based on received props:

const Paragraph = styled.p`
  font-weight: ${props => props.bold ?  "bold ": "normal"};
`

<Paragraph bold>Test</Paragraph> // Bold text

<Paragraph>Test</Paragraph> // Normal text

It’s also used to define GraphQL query schemas in Apollo:

const currentUserQuery = gql`
  query CurrentUserProfile {
    currentUser {
      login
      avatar
    }
  }
`;

Launching a new JavaScript project? Need help on an existing project? Work with us