Another great and super useful addition to the JavaScript language are template literals (or template strings). Essentially, they allow you to use expressions inside string literals which have quite a few interesting use-cases.
Template literals are denoted by back-tick characters ( ) and place-holders are denoted by the dollar sign and curly braces (${}). As I said earlier these template literals have a few interesting use-cases, the first one being that we can achieve string concatenation a lot easier by using the place holders:
const name = 'Steve';
console.log('Hello there, ' + name + '!');
console.log(`Hello there, ${name}!`);It's clear that the second console.log statement is a lot simpler to use.
And if we think about this a bit more it's clear how we can pass variables to HTTP calls dynamically as opposed to using string concatenation:
http.get(`http://api.com/product?name=${name}&colour=${colour}`);The above is something that I personally use quite a lot and I like the power that the template literal syntax gives.
Since template literals allow for JavaScript expressions we can also call methods within the expressions. Therefore having such a statement is perfectly valid:
console.log(${name.toLowerCase()});.
The template literal syntax also allows us to have multiline strings and allows for having expressions in the statement:
console.log(`This
is
a multiline
calculator: ${3 * 3}
Quite cool!`);
/* returns
This
is
a multiline
calculator: 9
Quite cool!
*/