Strings and Template literals

Strings are an essential part of programming, so let's now learn about an easy way to build strings using something called Template Literals. Let's start this by creating a new variable with some random person data; in this case, I will use my details.

const firstName = 'Akhil';
const secondName = 'Naidu';

// String Concatenation
const fullName = firstName + secondName;
console.log(fullName); // AkhilNaidu

// Concatenation with Space
const fullNameWithSpace = firstName + ' ' + secondName;
console.log(fullNameWithSpace); // Akhil Naidu

If you are following along this course, you might have encountered the above code piece multiple times. To understand the concept and the usage of template literals, I'm providing you with two examples. The first one is the same as the above example but using template literals, while the second is a more abstract example, which will demonstrate real-time use cases.

// Example One

const firstName = 'Akhil';
const secondName = 'Naidu';

// Template Literal
// dolloar firstName space dollor secondName within the backticks
const fullName = `${firstName} ${secondName}`
console.log(fullName) // Akhil Naidu

Introducing Template Strings and its Syntax

Let me briefly explain the above code. In the above code, rather than using single quotes you might have noticed that I'm using back ticks. The reason is quite simple because it is the basic syntax of the template literal; we will look into this by exploring examples.

With Template literals, we can more commonly write a string and then insert the variables directly into the line of code. In other words, template literals can assemble multiple pieces into one final string. Before I show you how that works, you should get familiar with the syntax.

To write a template literal, you need to use backticks, ``. Within these backticks, we can write our string usually, and whenever we need to use a variable within this string, we call them by using the dollar sign and curly braces ${variable}. The entire syntax will look something like this `string string ${variable} string symbol!`.

Let's assume you want to store the string which contains single quote; like I'm Akhil. You will face an issue in such cases, as the single quote within the string will conflict. So in such cases, we can use double quotes. Similarly, if we wish to use variables within the string, we can use ${variableName} syntax within backticks.

const firstName = 'Akhil';
const job = 'Teacher';
const birthYear = 1996;
const currentYear = 2021;
// Given these let's try to generate a string
// I'm Akhil, a 25year old Teacher

// traditional
const traditional = "I'm " + firstName + ', a ' + (currentYear - birthYear) + 'years old ' + job + '!';
console.log(traditional);

// Template Literals
const templateLiterals = `I'm ${firstName}, a ${currentYear - birthYear}years old ${job}!`
console.log(templateLiterals);

If you compare both the traditional and template literal methods, you can clearly say that the conventional approach is a pain. According to the usage of variables, symbols, quotes, spaces we should manage our line of code. So the great solution to resolve that issue was using Template Literal.

Another use Case

There are several uses with template strings, which are related to introducing HTML within JS, i.e., the XML format and many others more, but when it comes to the primary fundamental usage, template literal also helps us write multi-line strings.

// Tradional appraoch for multi-line sting
const string = 'This is a \n\
multi line \n\
string using \n\
traditional syntax';

console.log(string);

// Template literal for multi-line string
const string = `This is a
multi line
string using
template literal`

console.log(string);

We will use this extensively when we are dealing with DOM elements, for now, get hold of these facts.