# Template Literals
At some point you wrote something like this. You had a user's name, a score, and a message to display. So you built the string the way everyone learns first: with `+`.
```javascript
var name = "Priya";
var score = 42;
var msg = "Hello, " + name + "! Your score is " + score + ".";
// Hello, Priya! Your score is 42.
// Six pieces. Four operators. Two sets of quotes you can barely track.
```
It works. Nobody's disputing that. But read it again. Your eyes have to jump between strings and variables and operators to figure out what the final output looks like. Now imagine doing that with a URL, a multi-line HTML snippet, or anything where the variable is buried in the middle of actual sentence structure. The longer the string, the worse it gets.
Template literals fix this. They've been in JavaScript since 2015. If you're not using them, you're doing more work than you need to.
## **The Syntax, Plainly**
Two changes. You swap regular quotes for backticks. And anywhere you'd previously close the string, concatenate, and reopen it, you write `${ }` instead.
```javascript
const name = "Priya";
const score = 42;
const msg = `Hello, ${name}! Your score is ${score}.`;
// Hello, Priya! Your score is 42.
// Same output. You can actually read what it says.
```
The backtick key is in the top-left of most keyboards, above Tab. That's the only new character involved. Everything inside `${ }` is treated as JavaScript, so the value gets evaluated and dropped into the string wherever you put it.
![](https://cdn.hashnode.com/uploads/covers/678b775e773554ab7117f20a/43fc3180-6497-4ae5-a5de-2a3ce15fc07f.png align="center")
## **The Actual Difference**
The clearest way to see the improvement is to put both approaches next to each other doing the same job. Not a toy example. Something you'd actually write.
```javascript
// String Concatenation
const user = "Riya";
const item = "headphones";
const price = 1299;
const currency = "INR";
const receipt = "Hi " + user + ", you bought " + item +
" for " + currency + " " + price + "!";
// count the quotes. count the + signs. now imagine finding the bug.
```
```javascript
// Template Literal
const user = "Riya";
const item = "headphones";
const price = 1299;
const currency = "INR";
const receipt = `Hi ${user}, you bought ${item} for ${currency} ${price}!`;
// read like a sentence. edit like a sentence. done.
```
![](https://cdn.hashnode.com/uploads/covers/678b775e773554ab7117f20a/0d895f01-00b8-43a6-b364-b72c7504b069.png align="center")
## **Expressions, Not Just Variables**
The `${ }` slot takes any valid JavaScript expression. Not just variable names. A variable is just the simplest case. You can put math, function calls, ternaries, method calls, comparisons, if JavaScript can evaluate it to a value, it goes in there.
```javascript
const a = 4; const b = 7;
// Math directly in the string
const sum = ${a} + ${b} = ${a + b}; // "4 + 7 = 11"
// Function call
const shout = Hello, ${"priya".toUpperCase()}!; // "Hello, PRIYA!"
// Ternary: conditional logic inside the string
const stock = 0; const label = Item is ${stock > 0 ? "available" : "out of stock"}.; // "Item is out of stock."
```
## **Multi-Line Strings**
This is where the old way falls apart completely. Building a multi-line string with concatenation means either pasting everything on one long line or escaping newlines with `\n`. Neither approach matches what the output actually looks like.
```javascript
// String
const html = "\n" +
"
" + name + "
\n" +
"
" + bio + "
\n" +
"