What are template literals, and how do they differ from string concatenation?

[ir3ne]

[travisliu]

What Are Template Literals, and How Do They Differ from String Concatenation?

Imagine you need to write a sentence using pieces of information that change, like someone's name or age. In programming, you use "strings" to represent text, but how you put those pieces together can be done in different ways. Two common methods for doing this in JavaScript are template literals and string concatenation. Let’s dive in and see what these are, and how they’re different from each other.

String Concatenation

String concatenation is a fancy way of saying you're combining pieces of text together. Imagine you want to say, "Hello, my name is Alex and I am 16 years old." If you use string concatenation, you would do something like this:

let name = "Alex";
let age = 16;
let message = "Hello, my name is " + name + " and I am " + age + " years old.";
console.log(message);

Here, you’re using the + sign to glue the different parts together. While this works, it can get messy when you have a lot of text to connect, especially if the sentence is long. You have to keep adding + and make sure all the quotes are in the right places. This can be hard to read and easy to mess up.

Template Literals

Template literals are a newer and easier way to build strings in JavaScript. Instead of using + to connect different pieces, you use a special type of quotes called backticks (`). With template literals, you can directly include variables in your text by using ${}. Here's how you could write the same sentence with a template literal:

let name = "Alex";
let age = 16;
let message = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(message);

Notice that we used backticks instead of regular quotes, and we put ${name} and ${age} right where we want the values to go. This way, you don’t need to use + signs, and the whole thing is easier to read. It’s like filling in the blanks in a sentence.

Key Differences

1. Ease of Use: Template literals are much easier to read and write, especially for long sentences or when you have lots of variables to include.

2. Formatting: With template literals, you can easily add line breaks or even create multi-line strings without needing any extra symbols. For example:

   let poem = `Roses are red,
   Violets are blue,
   JavaScript is awesome,
   And so are you!`;

   In string concatenation, you’d have to add special characters for line breaks, which can make it confusing.

3. Readability: Template literals are often more readable because you don’t have all the + symbols everywhere. The variables are just placed directly into the text, making it look like a normal sentence.

Conclusion

Template literals make writing strings in JavaScript simpler and clearer compared to string concatenation. They help make your code easier to understand, especially when you're working with a lot of variables. Instead of worrying about all the + symbols and quotes, you can use backticks and just put your variables inside ${}. It’s like filling in blanks in a mad-lib, and it’s one of the reasons why many programmers prefer using template literals today.

So next time you’re writing some JavaScript and need to create a message, give template literals a try—they might just make your code a lot more fun to write!

[ir3ne]

Thanks @travisliu! Could you open a PR for this?