Strings

Text in JavaScript — template literals, immutability, the most-used string methods, and Unicode.

What it is, in plain English: A string is a sequence of characters — text. In JavaScript, strings can be written with single quotes, double quotes, or backticks. Backticks are the modern choice: they let you embed expressions directly inside the string with ${} — this is called a template literal, and it replaces the old 'add strings together' pattern.

Working with text in JavaScript

A string is just text — any characters between quotes. Names, messages, emails, URLs, addresses — any text your program needs to store or display is a string.

Three ways to write a string — and which to use

let a = 'single quotes';    // traditional
let b = "double quotes";    // traditional
let c = `backticks`;        // modern — template literals

Single and double quotes are identical — use whichever you prefer (pick one and be consistent). Backticks are different and more powerful — they're called template literals and you should reach for them whenever you need to combine text with variables.

Template literals — the JS version of Python f-strings

Old way (string concatenation — avoid this):

let name = "Alice";
let score = 95;
// ✗ Old way — clunky, hard to read:
console.log("Well done, " + name + "! Your score is " + score + " out of 100.");

Modern way with template literals (backticks + ${}):

// ✓ Modern way — clean and readable:
console.log(`Well done, ${name}! Your score is ${score} out of 100.`);

// You can put ANY expression inside ${}:
let price = 9.99;
let qty = 3;
console.log(`Total: $${(price * qty).toFixed(2)}`);   // Total: $29.97

// Multi-line strings — no 
 needed:
let message = `Dear ${name},
Your order has been confirmed.
Total: $${(price * qty).toFixed(2)}`;
console.log(message);

Strings are immutable

Once a string is created, it can't be changed. String methods always return a new string — they never modify the original:

let word = "hello";
let upper = word.toUpperCase();  // returns a new string
console.log(word);   // "hello" — unchanged!
console.log(upper);  // "HELLO" — new string

The most-used string methods

let text = "  Hello, World!  ";

// Clean up
text.trim()                 // "Hello, World!" — remove spaces from both ends
text.trimStart()            // "Hello, World!  " — left only
text.trimEnd()              // "  Hello, World!" — right only

// Case
text.trim().toLowerCase()   // "hello, world!"
text.trim().toUpperCase()   // "HELLO, WORLD!"

// Find things
text.trim().includes("World")        // true — does it contain this?
text.trim().startsWith("Hello")      // true
text.trim().endsWith("!")            // true
text.trim().indexOf("World")         // 7 — position (0-based), or -1 if not found

// Extract part of a string
let s = "JavaScript";
s.slice(0, 4)    // "Java"  — characters from index 0 up to (not including) 4
s.slice(4)       // "Script" — from index 4 to the end
s.slice(-6)      // "Script" — last 6 characters

// Replace
"Hello World".replace("World", "Codex")    // "Hello Codex" — first match only
"aabbaa".replaceAll("a", "x")             // "xxbbxx" — all matches

// Split and join (very useful)
"a,b,c".split(",")        // ["a", "b", "c"] — string to array
["a","b","c"].join("-")   // "a-b-c" — array to string

// Padding (useful for formatting)
"5".padStart(3, "0")      // "005" — pad to length 3 with zeros
"hi".padEnd(5, "!")       // "hi!!!" — pad right

String length and characters

let s = "Hello";
console.log(s.length);    // 5
console.log(s[0]);        // "H" — first character (0-based index)
console.log(s[4]);        // "o" — last character
console.log(s.at(-1));    // "o" — last character (modern way)
console.log(s.at(-2));    // "l" — second-to-last

Quotes inside strings: If your string uses single quotes, write it in double quotes (or backticks), and vice versa — or escape with a backslash: "It's a great day" or 'Say "hello"' or 'It's escaped'.

Try It Yourself

// Three ways to write a string
let a = 'single quotes';
let b = "double quotes";
let c = `backticks — template literals`;

// Template literals: embed any expression with ${}
let name = "Alice";
let age = 30;
let city = "Mumbai";

console.log(`Hello, ${name}! You are ${age} years old.`);
console.log(`Next year you'll be ${age + 1}.`);
console.log(`${name} lives in ${city}.`);

// Common string methods
let greeting = "  Hello, World!  ";
console.log(greeting.trim());            // "Hello, World!" — remove spaces
console.log(greeting.trim().length);     // 13
console.log(greeting.trim().toLowerCase()); // "hello, world!"
console.log(greeting.trim().toUpperCase()); // "HELLO, WORLD!"
console.log(greeting.trim().includes("World")); // true
console.log(greeting.trim().replace("World", "Codex")); // "Hello, Codex!"

// Splitting and joining
let csv = "apple,banana,cherry";
let fruits = csv.split(",");
console.log(fruits);           // ["apple", "banana", "cherry"]
console.log(fruits.join(" | ")); // "apple | banana | cherry"

Regular expressions, String.raw, and string iteration

Regular expressions with strings

// match — find matches
"hello world".match(/\w+/g)     // ["hello", "world"]
"2026-06-26".match(/(\d{4})-(\d{2})-(\d{2})/)
// ["2026-06-26", "2026", "06", "26"] — full match + capture groups

// replace with a function
"hello world".replace(/\w/g, c => c.toUpperCase())  // "Hello World"

// test — does it match?
/^\d+$/.test("12345")   // true — only digits
/^\d+$/.test("123a5")   // false

String.raw — template tag for raw strings

// Normal template literal processes escape sequences:
console.log(`C:
ewolder`);          // C:
                                        //    ew
                                        //       older   (
 and  are treated as newline/formfeed)

// String.raw doesn't process them:
console.log(String.raw`C:
ewolder`);  // C:
ewolder  ← literal backslashes

Strings are iterable

// Iterate over characters:
for (const char of "hello") {
  console.log(char);   // h, e, l, l, o
}

// Spread a string into an array of characters:
const chars = [..."hello"];  // ["h", "e", "l", "l", "o"]

// Destructure:
const [first, second, ...rest] = "hello";
console.log(first);  // "h"
console.log(rest);   // ["l", "l", "o"]

Template literal tag functions

// A tag function receives the template parts and values separately:
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const val = values[i - 1];
    return result + (val !== undefined ? `[${val}]` : '') + str;
  });
}

const name = "Alice";
const score = 95;
console.log(highlight`Player ${name} scored ${score} points.`);
// "Player [Alice] scored [95] points."

Unicode, string encoding, and the spec

JavaScript strings are UTF-16

ECMAScript strings are sequences of 16-bit unsigned integers (UTF-16 code units). Most characters fit in one code unit (the Basic Multilingual Plane, U+0000–U+FFFF). Characters outside the BMP (emoji, rare CJK, historic scripts) require two code units — a surrogate pair (a high surrogate U+D800–U+DBFF followed by a low surrogate U+DC00–U+DFFF). This creates a length vs character-count mismatch:

const emoji = "😀";
emoji.length        // 2 — two UTF-16 code units, not 1 character!
[...emoji].length   // 1 — spread iterates Unicode code points correctly
emoji.codePointAt(0)  // 128512 — the actual code point (U+1F600)

String comparison — Unicode order

String comparison (<, >) uses Unicode code point order, not locale-aware order. "banana" < "cherry" works, but "ä" > "z" because ä (U+00E4) > z (U+007A). For locale-aware sorting: use Intl.Collator or localeCompare().

["banana", "Avocado", "cherry"].sort()
// ["Avocado", "banana", "cherry"] — uppercase before lowercase (ASCII order)

["banana", "Avocado", "cherry"].sort((a, b) => a.localeCompare(b))
// ["Avocado", "banana", "cherry"] — locale-aware

Well-formed strings and isWellFormed()

ES2024 added String.prototype.isWellFormed() and toWellFormed(). A string is well-formed if it contains no lone surrogates (surrogates not paired correctly). Lone surrogates can occur when slicing emoji at a code-unit boundary:

const broken = "😀".slice(0, 1);  // lone high surrogate
broken.isWellFormed()  // false
broken.toWellFormed()  // "?" (replacement character) or similar safe form

The StringCreate abstract operation

Under the hood, the spec (§10.4.3) wraps primitive strings in exotic String objects when methods are called (autoboxing). The String exotic object overrides [[GetOwnProperty]] to expose integer-indexed characters as own properties and length as a non-writable property. This is why "hello"[0] returns "h" — property access on the autoboxed wrapper, not index syntax on the primitive itself.

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.