JavaScript Strings and Template Literals: Backticks, Interpolation, Methods

Three Ways to Write a String

JavaScript gives you three string delimiters. Two of them are interchangeable; the third does more.

Single and double quotes produce identical strings — pick one and stick with it (most modern codebases default to single quotes or let a formatter decide). Backticks produce a template literal, which is where things get interesting: they allow interpolation and span multiple lines.

Under the hood all three produce the same primitive string type. The delimiter is just a syntactic choice.

Escape Sequences and Embedded Quotes

Inside a string, a backslash starts an escape sequence. The common ones are \n (newline), \t (tab), \\ (literal backslash), and \" / \' for embedding the same quote you opened with:

You can avoid most escapes by picking the other quote style: 'She said "hi" and left.' needs no backslashes. Pragmatic over dogmatic.

Template Literals: the Backtick Superpower

A template literal does two things plain strings can't. First, it interpolates expressions with ${...}:

Anything inside ${...} is a JavaScript expression, not just a variable name. Arithmetic, function calls, ternaries, even other template literals — all fair game:

Second, template literals span multiple lines without needing \n:

Newlines in the source become newlines in the string. For anything longer than a short label, backticks are almost always the right call.

Interpolation Beats Concatenation

Before template literals, the only way to build a dynamic string was the + operator:

Both produce identical output. The template literal reads like the sentence it's building, while the + version forces you to track quotes, spaces, and concatenation operators. Use + only when you're appending one small thing to an existing string. For anything longer, reach for backticks.

Strings Are Immutable

Every method that looks like it modifies a string actually returns a new one:

If you want the change, you have to assign the result somewhere. This bites beginners who write s.replace("a", "b") and expect s to change. It doesn't. Strings in JavaScript are like numbers: the value itself can't be mutated, only the variable can be pointed at a new value.

The String Methods You'll Actually Use

The full string API is large. The handful you'll reach for daily:

A few notes worth memorising:

• length is a property, not a method — no parentheses.
• replace with a plain string replaces only the first match. Use replaceAll or a regex with the g flag to replace all occurrences.
• slice(start, end) takes a half-open range: the character at end is not included.
• Negative indices on slice count from the end: s.slice(-3) gives the last three characters.

Indexing and Iterating Characters

Strings behave like read-only arrays of characters. You can index them and iterate them, but you can't assign to a position:

for...of iterates code points, which handles most Unicode correctly. Using indices (s[i]) iterates UTF-16 code units, which can split emoji and other non-BMP characters in half. For ordinary text, both are fine; for anything user-generated, prefer for...of or [...s].

Tagged Template Literals

There's one more form worth knowing about, even if you don't write them often. A tagged template literal calls a function with the static string pieces and the interpolated values as separate arguments:

The tag function decides what the final string looks like — it can escape HTML, build SQL safely, compile CSS, or parse GraphQL. You'll see this pattern in libraries (styled-components, graphql-tag, lit-html) far more often than you'll write one yourself. But when you do need custom string processing, tags are the cleanest tool for the job.

Common Pitfalls

A short list of things that trip people up:

• Forgetting to assign method results. s.trim() does nothing on its own.
• Using + to concatenate a number and a string. "Age: " + 30 + 5 is "Age: 305", not "Age: 35". Template literals sidestep this: `Age: ${30 + 5}`.
• Mixing up == and string comparison. We'll cover equality properly later, but "1" == 1 is true and "1" === 1 is false. Prefer ===.
• Assuming length equals character count. For emoji and other surrogate-pair characters, "".length is 2, not 1. Use [..."".length] or Array.from(s).length when you need user-perceived characters.

Next: Numbers and BigInt

Strings are one primitive type; numbers are another, and JavaScript's number system has its own quirks — a single Number type for both integers and floats, plus BigInt for when that's not enough. That's the next page.