JAVASCRIPT / STRINGS AND TEMPLATE LITERALS
Creating strings with quotes and backticks
Write string literals with single quotes, double quotes, or backticks, escape only what you must, and know why all three produce the same value.
What you will learn
- All three delimiters produce the same primitive string; only the source text differs
- Escape a delimiter with a backslash, or switch delimiters to avoid escaping
- Backslash escapes are parser instructions, so they never count toward .length
- Only backticks can hold a real newline; quoted literals need \n
Understanding Creating strings with quotes and backticks
JavaScript gives you three ways to delimit a string literal: single quotes, double quotes, and backticks. The delimiter tells the parser where the text begins and ends, and it is not stored in the result. That is why 'hi', "hi", and `hi` are the same value, compare as === true, and all report typeof "string" — nothing in the finished string remembers how you typed it.
The one hard rule is that a delimiter cannot appear unescaped inside a literal it delimits, because the parser would read it as the closing mark and then try to interpret the rest of the line as code. You escape your way out with a backslash, or you sidestep the problem by choosing a different delimiter. The backslash is consumed at parse time rather than stored, which is why 'It\'s'.length is 4, not 5: the value holds one apostrophe and no backslash at all.
Backticks add one thing that matters even before interpolation enters the picture: a line break you type by pressing Enter survives as a newline character in the value, and so does the indentation in front of it. Single- and double-quoted literals must end on the line where they start, so multi-line text written with them needs \n spelled out. The trade is that backticks reserve two extra sequences you may have to escape, the backtick itself and ${, which would otherwise start a substitution.
Pick the delimiter that makes the source easiest to read, then stay consistent inside a file so a stray quote is easy to spot.
const a = 'JavaScript';
const b = "JavaScript";
const c = `JavaScript`;
console.log(a === b, b === c);
console.log(typeof c);
const apostrophe = 'It\'s 5 o\'clock';
const quoted = "She said \"go\"";
console.log(apostrophe);
console.log(quoted);
console.log(apostrophe.length);Quotes and backticks are only delimiters that the parser strips away, so choose the one that lets you write the text with the fewest escapes.
Worked examples
Let the delimiter do the work
Shows how choosing backticks removes escapes that single quotes would force, without changing the value.
const attr = `<input value="It's on">`;
const escapedVersion = '<input value="It\'s on">';
const allThree = `quote ' double " tick \``;
console.log(attr);
console.log(attr === escapedVersion);
console.log(allThree);Example explained
Line 1Inside backticks both ' and " are ordinary characters, so the HTML snippet is copied in untouched.
Line 2The single-quoted version must write \' for the apostrophe, but the double quotes still need no escape there.
Line 3=== is true because escaping changes the source text only, never the resulting characters.
Line 4allThree contains all three quote characters, so at least one escape is unavoidable: \` for the backtick that is currently acting as delimiter.
Multi-line text without \n
Demonstrates that a typed line break inside backticks produces exactly the same value as an explicit \n.
function usage() {
return `Usage:
app run
app stop`;
}
const withEscapes = "Usage:\n app run\n app stop";
console.log(usage());
console.log(usage() === withEscapes);Example explained
Line 1The break after Usage: is typed, not escaped; a template literal keeps every character up to its closing backtick.
Line 2The four spaces before app run come from source indentation and are part of the string — nothing strips leading whitespace for you.
Line 3withEscapes spells the same characters using \n plus explicit spaces.
Line 4=== reports true, confirming the two literals are just different spellings of one value.
Backslashes need doubling
Shows what happens to a Windows-style path when its backslashes are left single.
const bad = "C:\temp\new";
const good = "C:\\temp\\new";
console.log(bad);
console.log(good);
console.log(bad.length, good.length);Example explained
Line 1In bad, \t is the tab escape and \n the newline escape, so the value contains a tab and a line break and no backslash at all.
Line 2In good, each \\ is an escape that produces exactly one backslash character.
Line 3The lengths 9 and 11 show the doubled backslashes collapse to single characters, and that bad silently lost two of them.
Line 4Neither line raises an error, which is why a mis-escaped path only breaks later, wherever the value is used.
Important notes
Inside backticks a literal backtick needs \` and text that should display ${ needs \${, because both sequences are meaningful there.
Typographic quotes (’ “ ”) pasted from a document or chat app are ordinary characters, not delimiters, so const s = ‘hi’ throws instead of creating a string — and the difference is nearly invisible in a small font.
Common mistakes
Writing 'It's fine': the literal ends at the apostrophe, the parser then reads s fine' as code, and the file fails to load with SyntaxError: Unexpected identifier — nothing in it runs.
Copying a path in as "C:\temp\new": \t and \n are interpreted as escapes, so the value is wrong with no error at all and only breaks somewhere downstream.
Pressing Enter inside a double-quoted string to keep a long line readable: the literal is unterminated at the line break and throws SyntaxError: Invalid or unexpected token. Only backticks accept a real line break.
Try it yourself
Change, predict, then run
In a browser console, store the sentence He said "don't" in three variables using single quotes, double quotes, and backticks, escaping only where each delimiter forces you to. Log all three lengths and confirm each is 15.
Open the JavaScript workspaceCheck your understanding
What is the backslash doing in the literal 'It\'s', and what does it add to the resulting value?
- It stores a backslash plus an apostrophe, making the string one character longer.
- It marks the next quote as content, so the parser keeps reading and the value holds just the apostrophe.
- It switches the rest of the literal to template-literal rules.
- Nothing useful: the apostrophe would be fine on its own between single quotes.
Show answer
The escape is consumed while parsing, so the value is the four characters I, t, apostrophe, s — no backslash is stored and .length is 4. The last option is tempting because an apostrophe really is harmless inside double quotes or backticks, but between single quotes it closes the literal and the parser then chokes on the text that follows.