JavaScript Strings Tutorial [Create Strings using Template Literals]

Template literals or string literals are a new syntax in ES6. This is a quick introduction to string data types in JavaScript.

Template literals or string literals are a new syntax in ES6. This is a quick introduction to string data types in JavaScript. We will create strings in JavaScript using the traditional syntax of single quotes and double-quotes. We will also look at how you can create strings using template literals in JavaScript. So stick around till the end of the article to get a complete understanding of the string literal syntax as well as the traditional syntax of declaring and working with JavaScript Strings.

Before ES6, JavaScript had two syntaxes for declaring strings, which are very much valid as of now. Let's have a quick look at them. Let's start by defining two variables that use two different syntaxes.

let firstName = "John"; // using double quotes
let lastName = "Doe"; // using single quotes

The only difference that we have here is that the firstName has been declared using double quotes and the lastName has been declared using single quotes. Unlike some other c-type languages like PHP which interpret strings differently based on whether they are declared using single quotes or double quotes, JavaScript makes no differentiation. In JavaScript, it doesn't really matter whether the string has been declared using single quotes or double-quotes. We can check both the variables using typeof and see what is returned in the console. I have prettier installed for code formating which converts single quotes to double quotes so we can see the results with double quotes first. You see JavaScript treats both of them as strings with no differentiation at all, cool! Now let me disable the prettier option and keep single quotes in our file. Alright, let's try once again. You see we get the same result.

console.log(typeof firstName);
console.log(typeof lastName);

Now let's look at a new way of declaring strings in JavaScript which was introduced in ES6, know as the template literals. Declaring strings using template literals is easy.

let middleName = `Smith`;

You see I am using back ticks over here. These are not single quotes. Lets check the typeof this variable as well in our console.

console.log(typeof middleName);

You see the console returns string. There is more to template literals and the kind of additional features they bring to ES6. I consider string literals to be the ES6's answer to multiline strings in JavaScript because that's the first thing that they bring on the plate. With template literal writing multiline strings has become easy. Let's have a look at how developers used to write multiline strings in JavaScript before this new syntax. Let's assume that we need the following text to be printed in two lines, like so

// My name is John Doe
// I am a web Developer

Now if we had to do this using the double quotes or single quotes it would look something like this

let multiLine = "My name is John Doe" + "\n" + "I am a web Developer";

Now it's not necessary to have these two lines in different lines in your code, but developers working on JavaScript and having used it before the ES6 era would tell you that formatting like this was normal. Try to imagine multiple lines and each had to be separated by a newline character, certainly a nightmare. I'll print this to the console quickly so that we can see how it looks like:

console.log(multiLine);

Gives our desired results.

Now what if we use template literals instead. Let's have a look.

let newMultiline = `
My name is John Doe 
I am a web Developer 
`;

Let's see the output by printing this to the console.

console.log(newMultiline);

We get the desired result here as well.

If we look at our previous example, here we have John Doe passed as a string value. What if we were supposed to dynamically populate this value using the value stored in out variable. This is what we would need to do.

let multiLine =
  "My name is " + firstName + " " + lastName + "\n" + "I am a web Developer";

Let's see what's printed to the console, we do get our desired result but try to imagine a situation where you have to concatenate strings and variables in a long text or a page and have to use this syntax. After a certain time, it barely remains readable.

This is where string interpolation offered by template literals really becomes handy. Let's see how we can take advantage of that. So you can use this special syntax of a dollar sign followed by your variable encapsulated by curly braces to tell JavaScript that that value of this variable needs to be converted to a string. The beauty here is that you do not have to use any concatenation to add spaces. You can simply type your sentences as you would naturally with spaces and use string interpolation to print values using your variables.

let newMultiline = `
My name is ${firstName} ${lastName} 
I am a web Developer 
`;

Let's check if this gives us the desired results. Here we have it, the way we wanted it. One thing to point out here, it's not just variables, you can any JavaScript expressions to be converted to string values between this syntactic sugar provided by template literals.

What Can You Do Next 🙏😊

If you liked the article, consider subscribing to Cloudaffle, my YouTube Channel, where I keep posting in-depth tutorials and all edutainment stuff for ssoftware developers.