Before template literals, string concatenation was the primary method for building complex strings in JavaScript. Here's a side-by-side comparison of how traditional concatenation and template literals handle different scenarios:
Simple Variable Insertion
Traditional Concatenation:
javascript1let msg1 = "Welcome, " + name + "!";
Template Literals:
javascript1let msg2 = `Welcome, ${name}!`;
Multiple Variables
Traditional Concatenation:
javascript1let bio1 = "I'm " + name + ", " + age + " years old, from " + city + ".";
Template Literals:
javascript1let bio2 = `I'm ${name}, ${age} years old, from ${city}.`;
Expressions Inside Strings
Traditional Concatenation:
javascript1let total1 = "Total: ₹" + (price * qty) + " (including " + (price * qty * 0.18) + " GST)";
Template Literals:
javascript1let total2 = `Total: ₹${price * qty} (including ${price * qty * 0 2 3[Read the full article at DEV Community](https://dev.to/pratham69/template-literals-in-javascript-389m) 4 5--- 6 7**Want to create content about this topic?** [Use Nemati AI tools](https://nemati.ai) to generate articles, social posts, and more.

![[AINews] The Unreasonable Effectiveness of Closing the Loop](/_next/image?url=https%3A%2F%2Fmedia.nemati.ai%2Fmedia%2Fblog%2Fimages%2Farticles%2F600e22851bc7453b.webp&w=3840&q=75)



