Getting Started with Modern JavaScript — Template Literals

const newWay = `is cool`;

String Interpolation

In ES5 you had string concatenation:

const name = 'Jack';
const old = 'My name is '+ name + '.';

Multiline

In ES5 you had to use the newline character \n explicitly for line breaks and the \ character at the end of a line to be able to write multi-line strings. This allows to create a string on two lines:

const concatenation = 'First line\n \
second line';

Tagged Templates

A not as known feature that comes along with template literals, is the ability to tag them. A tagged template is a function that allows you to parse template literals, which allows us to control the string creation.

hi(['My name is ', '.'], name);

Conclusion

We have learned how template literals make strings easier to handle. They can take care of our variables and embedded expressions with ease. This is much more powerful than the old concatenation of strings and variables. And we also took a look into tagged templates and how they can let us manipulate the template literals before the browser exposes them to the world.

Getting Started Series

This post is part of my Getting Started with Modern JavaScript Series. Make sure you take a look at the other posts in the series:

Angular by day, React by night. Senior Consultant jProfessionals. Educator wannabe. ngVikings organizer.

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