Strings and Template Literals

Strings are sequences of characters used to represent text in JavaScript.

Strings are represented fundamentally as sequences of UTF-16 code units.

Creating Strings

You can create strings using single quotes or double quotes.

const single = 'Hello';
const double = "World";
console.log(single + ' ' + double);

Hello World

Template Literals

Template literals are enclosed by backtick (`) characters instead of double or single quotes.

Template literals can contain placeholders. These are indicated by the dollar sign and curly braces (${expression}).

const name = 'Alice';
const age = 30;
console.log(`My name is ${name} and I am ${age} years old.`);

My name is Alice and I am 30 years old.

A common misconception is that you can interpolate variables inside single or double quotes using ${}. See what happens when you try:

const user = 'Alice';
console.log('Welcome, ${user}!');

Welcome, ${user}!

You can embed any valid JavaScript expression inside a template literal.

const price = 10;
const tax = 0.2;
console.log(`Total: $${price + (price * tax)}`);

Total: $12

Multi-line strings are also easy with template literals.

Any newline characters inserted in the source are part of the template literal.

const multi = `Line 1
Line 2
Line 3`;
console.log(multi);

Line 1
Line 2
Line 3

Escaping Characters

If you need to include a quote inside a string delimited by the same quote, you can escape it.

console.log('It\'s a beautiful day!');

It's a beautiful day!

String Immutability

Strings are immutable: once a string is created, it is not possible to modify it.

Why Strings Cannot Be Changed

You might wonder why strings are immutable in JavaScript. Editing one character in place — text[0] = 'H' — would obviously be cheaper than building a new string. The catch is that engines share string storage: ten variables holding "hello" frequently point at one place in memory. Were strings mutable, changing one would change all ten.

Immutability is what makes that sharing safe. When you genuinely need to edit characters, split the string into an array, change what you need, and join it back — arrays are mutable, strings are not.

Because of immutability, a common trap is assuming that string methods modify the original string directly. What do you think this code outputs?

let word = 'b';
word.toUpperCase();
word += 'at';
console.log(word);

bat

String methods like toUpperCase() return a new string rather than modifying the existing one. You must assign the result back to a variable if you want to keep it!

let text = 'hello';
text = text.toUpperCase();
console.log(text);

HELLO

Accessing Code Units

You can access the exact UTF-16 code unit of a character.

const str = 'A';
console.log(str.charCodeAt(0));

65

Tagged Templates

A more advanced form of template literals are tagged templates.

You can pass a template literal directly to a function, called a tag function.

function tag(strings, ...values) {
  return 'Tagged!';
}
console.log(tag`Hello`);

Tagged!