Template Literals in ES6: ES6 Basics

In ES6 (or ES2015), one of the many enhancements to the language was the introduction of template literals, which offer a more concise and readable way to work with strings in JavaScript. This feature makes string interpolation and multi-line strings more effortless than they were in earlier versions of the language.

Traditional String Concatenation

Before ES6, concatenating strings with variables involved using the `+` operator, which could sometimes result in cumbersome and less readable code:

var name = "John";
var age = 30;
var message = "Hello, my name is " + name + " and I am " + age + " years old.";

Introduction to Template Literals

With template literals, you can embed expressions (like variables) inside string literals, using `${}`. These literals are enclosed by the backtick (` `) character instead of double or single quotes.

Using the previous example, utilizing template literals would look like:

let name = "John";
let age = 30;
let message = `Hello, my name is ${name} and I am ${age} years old.`;

Benefits of Template Literals

String Interpolation

Embed expressions within strings seamlessly:

let a = 5;
let b = 10;
console.log(`The sum of a and b is ${a + b}.`); // The sum of a and b is 15.

Multi-line Strings

Before ES6, creating multi-line strings was a bit of a chore. With template literals, this is much easier:

let multiLineString = `
This is a line.
And this is another line.
`;
console.log(multiLineString);

Tagged Templates

Tagged templates are an advanced form of template literals. A tag is simply a function that processes the template string in a specific way:

function tag(strings, …values) {
 console.log(strings); // [ 'Hello ', ' is ', ' years old.' ]
 console.log(values); // [ 'John', 30 ]
 return `${strings[0]}${values[0]}${strings[1]}${values[1]}${strings[2]}`;
}
let name = "John";
let age = 30;
let taggedMessage = tag`Hello ${name} is ${age} years old.`;

Expression Interpolation

Apart from simple variables, you can embed any JavaScript expression inside `${}`:

let price = 10;
let quantity = 5;
console.log(`Total cost is: ${price * quantity}$`); // Total cost is: 50$

Raw String Access

Sometimes, you might want to access the raw version of a template literal, for instance, to capture backslashes in a string. Using the `raw` property on the first parameter of a tagged template will do just that:

function logRaw(strings) {
 console.log(strings.raw[0]);
}
logRaw`This is a text with a newline character\n right here.`;
// Outputs: "This is a text with a newline character\\n right here."

Conclusion

Template literals in ES6 significantly enhance the way developers can work with strings in JavaScript. Through easier string interpolation, multi-line strings, and advanced features like tagged templates, they make the code more concise and readable. Incorporating these into your day-to-day coding can lead to cleaner and more maintainable codebases.