gitbook

Template Literals

In traditional JavaScript, text that is enclosed within matching " marks, or ' marks is considered a string. Text within double or single quotes can only be on one line. There was also no way to insert data into these strings. This resulted in a lot of ugly concatenation code that looked like:

var name = 'Sam';
var age = 42;

console.log('hello my name is ' + name + ' I am ' + age + ' years old');
//= 'hello my name is Sam I am 42 years old'

ES6 introduces a new type of string literal that is marked with back ticks (`). These string literals can include newlines, and there is a new mechanism for inserting variables into strings:

var name = 'Sam';
var age = 42;

console.log(`hello my name is ${name}, and I am ${age} years old`);
//= 'hello my name is Sam, and I am 42 years old'

The ${} works fine with any kind of expression, including member expressions and method calls.

var name = 'Sam';
var age = 42;

console.log(`hello my name is ${name.toUpperCase()}, and I am ${age / 2} years old`);
//= 'hello my name is SAM, and I am 21 years old'

There are all sorts of places where these kind of strings can come in handy, and front end web development is one of them.

Further reading

PreviousDefault ParamsNextDestructuring

Last updated