Building text out of values

Suppose you want the line "3 x Notebook = 13.50" out of three variables. With + you write `quantity + " x " + item + " = " + total`, and now you are counting spaces inside quote marks while your eyes bounce between the fixed words and the changing values. Miss one space and you get "3 xNotebook".

It works. It is just hard to read and easy to get subtly wrong, and the mistakes are the kind you only notice in a screenshot from a user. The language grew a second way of writing strings specifically to fix this.

A template literal is a string written between backticks — the ` character, usually to the left of the 1 key — instead of quote marks. On its own that changes nothing: `hello` and "hello" are the same string.

What backticks unlock is ${...}. Anywhere inside a template literal you can write a dollar sign, an opening brace, some JavaScript, and a closing brace, and the result of that JavaScript is dropped into the text at that spot. `${quantity} x ${item}` reads almost like the sentence you are trying to produce, with the changing parts marked out.

Whatever goes between the braces is an expression, which means any code that produces a value: a variable, a sum, a method call, a comparison, even another template literal. It is evaluated once, at the moment the line runs, and then it is over — a template literal produces a plain, ordinary, immutable string and hands it to you. There is no live link back to the variables.

This is the point beginners most often get wrong, so make it explicit. Build a label with a template literal, then change the price variable on the next line, and the label does NOT update. It never could — the label is just a string, and strings do not change.

The template literal is a recipe that was followed once, when that line executed. If you need the label to reflect a later value, you run the recipe again (usually by putting it inside a function and calling it when you need the answer).

A normal quoted string cannot contain a real line break — press Enter inside "..." and the program will not even parse. To get a new line you type the two characters \n, which JavaScript reads as one newline character.

Inside backticks you can simply press Enter. The line breaks you type are part of the string, exactly where you put them. That makes multi-line messages, small reports and formatted output far easier to see, because the code is laid out the way the output will be.

The catch is that the indentation of your code becomes part of the string too. If you indent the second line of a template literal to line up with your code, those spaces are in the text. Either accept it, or write the block flush against the left margin, which looks wrong in the file but produces the right output.

Whatever you put in ${} is converted to text first. Numbers and booleans do the obvious thing: 2 becomes "2", true becomes "true". null becomes "null" and undefined becomes "undefined" — which is how blank-looking bugs such as "Hello undefined" reach real users.

Arrays are converted by joining their items with commas and no spaces, so ${[1, 2]} gives "1,2". That is occasionally handy and often not what you meant.

Plain objects are the trap. ${{ a: 1 }} produces the famously useless "[object Object]", because that is what an object's default text form is. When you want to SEE an object, reach for JSON.stringify(value) instead — you will meet it properly in module 9.

None of this is an error, which is exactly why it bites. JavaScript will happily paste any value into your sentence; making sure the value is worth pasting is your job.

If the text itself needs a backtick, put a backslash in front of it: \`. If it needs a literal dollar-brace that must NOT be substituted — writing documentation about template literals, for instance — escape the dollar: \${.

And + has not gone anywhere. For joining two variables with nothing in between, `a + b` is shorter and perfectly clear. The rule of thumb: the moment there is fixed wording mixed in with values, use a template literal; when you are only concatenating two pieces, use +.

There is a third form you will see occasionally, a function name written directly in front of a backtick string (a tagged template). It hands the pieces to that function to assemble, which libraries use for things such as escaping. You do not need it here — just recognise it so it does not look like a typo.

Backticks plus ${expression} build text out of fixed wording and changing values, readably. Line breaks inside backticks are real line breaks in the string.

Everything in ${} is converted to text: objects become "[object Object]", arrays become comma-joined, undefined becomes "undefined". The result is a plain string, produced once, with no live connection to the variables it came from.