Strings and template literals

Strings, three kinds of quotes

Programs talk to people through text: log lines, error messages, receipts, chat replies. Assembling those messages out of fixed text plus changing values is a daily job, and JavaScript has a dedicated syntax for it that beats gluing pieces together with +.

JavaScript strings work like Python strings: text in quotes. Single 'hi' and double "hi" quotes are interchangeable. The third kind, backticks ` hi `, creates a template literal, and it is the one you will use constantly.

Before we combine strings we need a variable. In Python you wrote name = "Ada". In JavaScript you declare it with the keyword let:

let name = "Ada";

Variables get their own lesson (2-1). For now, let creates one.

Joining with + works like Python:

console.log("Hello, " + name + "!");

And .length is a property, not a function, so there are no parentheses: name.length gives 3 where Python used len(name).

Template literals are JavaScript's f-strings

In Python you wrote f"{name} is {age}". JavaScript's version uses backticks and ${...}:

let age = 36;
console.log(`${name} is ${age} years old`);

Anything inside ${...} is a full expression, so math works too: ` Next year: ${age + 1} `. Two rules to remember:

• The quotes must be backticks. With normal quotes, ${name} prints literally.
• The dollar sign comes before the brace: ${age}, not {age}.

Joining with + next to a template literal

The same greeting written both ways, side by side, is the clearest way to see why template literals win. The first line glues three pieces together with +. The second uses a template literal and even does arithmetic inside the placeholder.

let name = "Ada";
let age = 36;

console.log("Hello, " + name + "!");
console.log(`${name} turns ${age + 1} next year`);
console.log(name.length);

Output

Hello, Ada!
Ada turns 37 next year
3

The + version has to open and close quotes around every literal chunk, which is where missing spaces come from. The template literal keeps the sentence readable, and ${age + 1} proves that a placeholder holds a full expression, not just a variable name. The last line prints 3, the number of characters in "Ada", read from the .length property with no parentheses.

Two values in one sentence

Here a city name and a temperature are combined into a single line of output using one template literal.

let city = "Miami";
let temp = 21;

console.log(`It is ${temp}°C in ${city}`);

Output

It is 21°C in Miami

One template literal can hold as many placeholders as the sentence needs, and everything between them, including the °C and the spaces, is printed exactly as written. The whole string starts and ends with backticks. Swapping those backticks for quotes would print the characters ${temp} instead of 21, which is the single most common mistake with this syntax.

Template literals can span lines

A normal quoted string must end on the line it started. A template literal may contain real line breaks and keeps them, because backticks were designed to hold whole blocks of output such as receipts, emails, and reports, without any \n juggling:

const receipt = `Order #1042
Total: $18.50`;

Printing receipt gives two lines. The line break counts as one character in .length, exactly as \n did in Python.

Counting the characters in a two-line string

One template literal holds a small two-line receipt. Printing it shows the line break survived, and printing its .length shows how the break is counted.

const receipt = `Order #1042
Total: $18.50`;
console.log(receipt);
console.log(receipt.length);

Output

Order #1042
Total: $18.50
25

The length adds up as 11 characters on the first line, 13 on the second, and 1 more for the line break between them, giving 25. That last character is real: a line break inside a template literal is stored as an ordinary newline character, so it takes up a slot just like a letter or a space does.

Only backticks understand ${...}

The line that prints Ada is 36 is ` console.log(${name} is ${age}); `. Placeholders are a feature of the backtick syntax alone.

Written with double quotes, "${name} is ${age}" prints the characters ${name} is ${age} verbatim, because to a normal string those are just symbols. Python-style braces without a dollar sign, {name}, do nothing in any JavaScript string. And Python's f prefix has no JavaScript equivalent at all, so there is nothing to add in front of the quotes. The backtick is the entire mechanism.