JavaScript Academy · Lesson

String Interpolation Basics

Embed expressions inside template literals.

String Interpolation Basics is a free JavaScript Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Are Template Literals

Template literals are a way to create strings using the backtick character instead of quotes. They let you embed expressions directly inside a string without manual concatenation.

A placeholder is written with a dollar sign followed by curly braces wrapping an expression. JavaScript evaluates the expression and inserts its value into the string.

const name = "Alice"
const greeting = "Hello, " + name + "!"
console.log(greeting)

Interpolation Syntax

Inside a template literal you place an expression between an opening dollar-brace and a closing brace. The expression is evaluated and converted to a string.

The example below uses plain concatenation to produce the same result you would get from interpolation, so the idea is clear without showing the literal syntax.

const product = "Book"
const price = 12
const line = product + " costs " + price + " dollars"
console.log(line)

Why Interpolation Helps

Concatenation with the plus operator becomes hard to read when you mix many variables and literal text. Interpolation keeps the surrounding text intact and only swaps in the dynamic parts.

Fewer plus operators
No stray spacing mistakes
Clearer intent

const user = "Bob"
const count = 3
console.log(user + " has " + count + " messages")

Embedding Any Expression

A placeholder can hold any valid expression, not just a variable. Arithmetic, function calls, and property access all work.

const a = 5
const b = 7
console.log("Sum is " + (a + b))
console.log("Max is " + Math.max(a, b))

Calling Functions Inside

You can call a function and let its returned value flow into the string. The example shows the equivalent concatenation form.

function upper(s) { return s.toUpperCase() }
const word = "hello"
console.log("Loud: " + upper(word))

Property Access

Object properties can be read directly inside a placeholder. Here we read fields from a user object.

const user = { name: "Eve", age: 30 }
console.log("Name: " + user.name + ", Age: " + user.age)

Numbers Become Strings

When a number lands in a string context it is automatically converted to its text form. The same coercion happens with interpolation.

const total = 19.99
console.log("Total: $" + total)

Ternaries Inside Placeholders

Conditional logic with the ternary operator fits in a placeholder, letting you choose between two values inline.

const score = 72
const grade = score >= 60 ? "Pass" : "Fail"
console.log("Result: " + grade)

Nested Expressions

Placeholders can contain method chains and nested calls. Whatever the expression evaluates to is inserted.

const items = ["a", "b", "c"]
console.log("Joined: " + items.join("-"))
console.log("Count: " + items.length)

Mixing Many Values

Template literals shine when a sentence weaves several variables together. Compare the readable interpolated version (described in prose) with this concatenated equivalent.

const city = "Paris"
const temp = 21
const sky = "sunny"
console.log("In " + city + " it is " + temp + "C and " + sky)

Escaping the Dollar Sign

If you want a literal dollar-brace sequence to appear as text rather than as a placeholder, you escape the dollar sign with a backslash inside a template literal. In plain strings no escaping is needed.

const text = "Use $\{x\} for a placeholder"
console.log(text)

Quick Check

Test your understanding of interpolation.

Recap

Recap: Template literals use backticks and placeholders to embed expressions in strings.

A placeholder evaluates any expression
Values are coerced to strings
Interpolation is clearer than long concatenation
Escape the dollar sign to show it literally

const n = "World"
console.log("Hello, " + n + "!")

Frequently asked questions

Is the “String Interpolation Basics” lesson free?

Yes — the full text of “String Interpolation Basics” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “String Interpolation Basics”?

Embed expressions inside template literals. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “String Interpolation Basics” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy