Strings & Template Literals

How to work with text in JavaScript, from basic quotes to powerful multi-line template literals with injected expressions.

JavaScript5 min readConcept 5 of 62

What are strings?

A string is a primitive data type used to represent text. In JavaScript, you can create strings using single quotes ('hello'), double quotes ("hello"), or backticks ( hello ).

Strings created with backticks are called Template Literals. They were introduced in ES6 and provide advanced features that single and double quotes lack.

Why use Template Literals?

Before template literals, combining strings and variables (concatenation) was tedious and error-prone, requiring a mess of + operators and manual spaces.

Template literals allow 'interpolation', which means you can inject variables and JavaScript expressions directly into the string using ${expression} syntax. They also naturally support multi-line strings without needing \n escape characters.

String Methods

Even though strings are primitives, JavaScript automatically wraps them in a temporary object when you try to access properties on them. This gives you access to a huge library of built-in methods.

You can check the length (str.length), change case (str.toUpperCase()), extract parts (str.slice(0, 5)), or replace text (str.replace('a', 'b')).

Remember that strings are immutable. String methods never change the original string; they always return a brand new string.

Template Interpolation

Watch how a template literal effortlessly injects variables and evaluates math expressions directly inside the string.

Strings in Action

// 1. Template Interpolation
const user = "Alice";
const msg = `Hello, ${user}!`;
console.log(msg);
// 2. Method Chaining
const raw = " HELLO world ";
const clean = raw
.trim()
.toLowerCase()
.replace("world", "friend");
console.log(clean);
Console Output
>"Hello, Alice!"
>"hello friend"
iMethod chaining works seamlessly because every string method (trim, toLowerCase, etc.) evaluates and returns a brand new string object.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Which quote style supports multi-line strings without escape characters?
  2. 2What is the output of `` `2 + 2 = ${2 + 2}` ``?
  3. 3If `const word = "Cat";`, what does `word.toUpperCase()` do to the `word` variable?

Remember this

  • Template literals use backticks ( ) and support ${} for interpolation.
  • Template literals inherently support multi-line strings.
  • Strings are zero-indexed, meaning the first character is at index 0.
  • String methods never modify the original string; they return a new one.

Done with this concept?

Mark it complete to track your progress. No login needed.