7.1 String Fundamentals & Quoting Styles

A string is an ordered sequence of zero or more Unicode characters enclosed in quotes. JavaScript supports three distinct quoting styles, each with unique capabilities:

const msg = 'Hello!';

const msg = "Hello!";

const msg = `Hi ${name}!`;

// Three quote styles — all produce primitive strings
const single   = 'Hello, World!';
const double   = "JavaScript Mastery";
const template = `Learning JS in ${new Date().getFullYear()}`;

// Converting other types to strings
const fromNum  = String(42);        // "42"
const fromBool = String(true);      // "true"
const fromNull = String(null);      // "null"
const method2  = (99.5).toString(); // "99.5"
const method3  = 255..toString(16); // "ff" (hexadecimal)
const method4  = 255..toString(2);  // "11111111" (binary)

// Type check
console.log(typeof single);   // "string"
console.log(typeof template); // "string"
console.log(typeof fromNum);  // "string"

7.2 Escape Characters & Special Sequences

When you need to embed characters inside a string that would otherwise break the syntax — like quotes, backslashes, or control characters — you use escape sequences prefixed with a backslash (\).

// Embedding quotes inside strings
const sentence1 = 'It\'s a beautiful day!';   // single inside single
const sentence2 = "He said \"Hello, World!\"";  // double inside double
const sentence3 = `No escaping needed: It's "fine"!`; // template literal

// Control characters
const report = "Name:\tAlice\nScore:\t98\nGrade:\t\"A+\"";
console.log(report);
// Name:   Alice
// Score:  98
// Grade:  "A+"

// Windows file path (double backslashes)
const filePath = "C:\\Users\\Alice\\Documents\\notes.txt";
console.log(filePath); // C:\Users\Alice\Documents\notes.txt

// Unicode escapes
const heart  = "\u2764 I love JavaScript!";
const rocket = "\u{1F680} To the moon!";
console.log(heart);  // ❤ I love JavaScript!
console.log(rocket); // 🚀 To the moon!

7.3 Template Literals & Tagged Templates

Introduced in ES6, template literals (backtick strings) unlock expression interpolation, multi-line strings without escape sequences, and the advanced tagged template pattern.

• Interpolation: Any valid JS expression inside ${...} — variables, arithmetic, function calls, ternaries, even nested templates.
• Multiline: Line breaks within backticks are preserved literally — no \n needed.
• Tagged Templates: A function placed before the backtick receives an array of string parts and interpolated values — used in styled-components, SQL sanitizers, and i18n libraries.

const name = "Alice";
const score = 95;

// 1. Expression Interpolation
const msg = `Hello, ${name}! Score: ${score}/100. Grade: ${score >= 90 ? 'A' : 'B'}.`;
console.log(msg); // "Hello, Alice! Score: 95/100. Grade: A."

// 2. Arithmetic inside template
const total = `Order total: $${(29.99 * 3 * 1.08).toFixed(2)}`;
console.log(total); // "Order total: $97.17"

// 3. Multiline string (newlines are literal)
const haiku = `An old silent pond
A frog jumps into the pond
Splash! Silence again`;
console.log(haiku); // 3 lines, no \n needed

// 4. Tagged template (highlight function)
function highlight(strings, ...values) {
  return strings.reduce((acc, str, i) => {
    const val = values[i] !== undefined ? `[${values[i]}]` : '';
    return acc + str + val;
  }, '');
}
console.log(highlight`User ${name} earned ${score} points!`);
// "User [Alice] earned [95] points!"

7.4 String Manipulation Methods

JavaScript strings come with a rich set of built-in methods that return transformed copies of the original (strings are immutable — methods never modify in place; they always return new strings).

const s = "Hello World";
s.toUpperCase(); // "HELLO WORLD"
s.toLowerCase(); // "hello world"
// Original s is unchanged!

const raw = "  hello  ";
raw.trim();      // "hello"
raw.trimStart(); // "hello  "
raw.trimEnd();   // "  hello"

"42".padStart(8, "0"); // "00000042"
"42".padEnd(8, "..");  // "42......"
"ha".repeat(3);        // "hahaha"

const s = "I like cats, cats!";
s.replace("cats", "dogs");    // first only
s.replaceAll("cats", "dogs"); // all occurrences
s.replace(/cats/g, "dogs");   // regex + global flag

function formatUsername(raw) {
  return raw
    .trim()                          // remove leading/trailing whitespace
    .toLowerCase()                   // normalize case
    .replace(/\s+/g, '_')            // spaces → underscores
    .replace(/[^a-z0-9_]/g, '')      // remove non-alphanumeric
    .padEnd(4, '0')                  // ensure minimum 4 chars
    .slice(0, 20);                   // cap at 20 characters
}

console.log(formatUsername("  John  Doe 42!  ")); // "john_doe_420"
console.log(formatUsername("  AB  "));            // "ab00"
console.log(formatUsername("alice_wonder_land_99_extended")); // "alice_wonder_land_99"

7.5 Searching & Testing Strings

JavaScript provides six core methods for locating content inside strings. Knowing which to use depends on whether you need an index, a boolean, or a position-relative test.

const text = "The quick brown fox jumps over the lazy dog";

// indexOf — returns position or -1
text.indexOf("fox");          // 16
text.indexOf("cat");          // -1 (not found)
text.indexOf("the", 5);       // 31 (search from index 5)

// lastIndexOf — finds last occurrence
text.lastIndexOf("the");      // 31 ("the" appears at 0 and 31)

// includes — boolean test (preferred)
text.includes("brown");       // true
text.includes("purple");      // false
text.includes("Fox");         // false (case-sensitive!)

// startsWith / endsWith
text.startsWith("The");       // true
text.startsWith("quick");     // false
text.endsWith("dog");         // true
text.endsWith("dog", 40);     // false (checks first 40 chars)

// Practical: URL type detection
const url = "https://api.example.com/users?id=42";
if (url.startsWith("https://")) console.log("Secure connection");
if (url.includes("/users"))     console.log("User endpoint detected");
if (url.endsWith(".json"))      console.log("JSON response expected");

// Case-insensitive search pattern
const query = "JAVASCRIPT";
const text  = "I love JavaScript";
text.toLowerCase().includes(query.toLowerCase()); // true ✅

7.6 Extracting Substrings & Splitting

JavaScript offers three methods to extract a portion of a string, plus .split() to break a string into an array of parts. Understanding the subtle differences between slice and substring prevents subtle bugs in production code.

const s = "JavaScript";
s.slice(0, 4);   // "Java"
s.slice(4);      // "Script"
s.slice(-6);     // "Script"
s.slice(-6, -3); // "Scr"
s.slice(4, 2);   // "" (swapped = empty)

const s = "JavaScript";
s.substring(0, 4);  // "Java"
s.substring(4, 0);  // "Java" (swapped!)
s.substring(-3, 4); // "Java" (-3 → 0)
s.substring(4, 10); // "Script"

const email = "alice.wonder@example.com";

// Extract parts with slice
const username = email.slice(0, email.indexOf('@'));    // "alice.wonder"
const domain   = email.slice(email.indexOf('@') + 1);  // "example.com"

// .at() — ES2022, supports negative indices
const lastChar  = email.at(-1);   // "m"
const firstChar = email.at(0);    // "a"

// .split() — converts string to array
const parts = email.split('@');           // ["alice.wonder", "example.com"]
const words = "Hello World JS".split(' '); // ["Hello", "World", "JS"]
const chars = "abc".split('');             // ["a", "b", "c"]

// Parsing CSV row
const csv = "Alice,28,Engineer,New York";
const [name, age, role, city] = csv.split(',');
console.log(name, age, role, city);
// "Alice" "28" "Engineer" "New York"

// Reverse a string (classic algorithm)
const reversed = "JavaScript".split('').reverse().join('');
console.log(reversed); // "tpircSavaJ"

7.7 String Immutability & Primitive vs Object

Strings in JavaScript are immutable primitives. Once created, a string's characters cannot be altered — every "modification" method returns a brand-new string, leaving the original untouched. This design enables safe value sharing, predictable behavior, and engine-level optimizations.

// ❌ Attempting to mutate a string — silently fails!
let msg = "Hello";
msg[0] = "J";
console.log(msg); // Still "Hello" — mutation silently ignored

// ✅ Methods return new strings — original is unchanged
let original = "  hello world  ";
let trimmed  = original.trim();         // "hello world"
let upper    = trimmed.toUpperCase();   // "HELLO WORLD"

console.log(original); // "  hello world  " (unchanged)
console.log(trimmed);  // "hello world"
console.log(upper);    // "HELLO WORLD"

// The variable (binding) can be reassigned — the value itself is immutable
let name = "Alice";
name = name.toUpperCase();  // Reassigns the binding to a new string
console.log(name);          // "ALICE"

// ⚠️ String primitive vs String object — avoid new String()
const primitive = "hello";               // string primitive (preferred)
const strObject = new String("hello");   // String wrapper object (avoid!)

console.log(typeof primitive); // "string"
console.log(typeof strObject); // "object" ← different type!
console.log(primitive === "hello");  // true
console.log(strObject === "hello");  // false ← reference comparison!

7.8 Hands-on Coding Challenge

Apply everything from this chapter in a real-world scenario — build a Smart Text Analyzer that processes a raw string input and produces a complete analysis report.

analyzeText("  A man a plan a canal Panama  ");
// Expected:
// { original: "A man a plan a canal Panama",
//   wordCount: 7, charCount: 22,
//   firstWord: "A", lastWord: "Panama",
//   titleCase: "A Man A Plan A Canal Panama",
//   reversed: "amanaP lanac a nalp a nam A",
//   isPalindrome: true  ← after lowercasing & removing spaces! }

function analyzeText(input) {
  const original = input.trim();
  const words    = original.split(/\s+/);        // handles multiple spaces

  // Title case each word
  const titleCase = words
    .map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
    .join(' ');

  // Reversed string
  const reversed = original.split('').reverse().join('');

  // Palindrome check (clean: only letters, lowercase)
  const clean    = original.toLowerCase().replace(/[^a-z]/g, '');
  const cleanRev = clean.split('').reverse().join('');

  return {
    original,
    wordCount:    words.length,
    charCount:    original.replace(/\s/g, '').length,
    firstWord:    words[0],
    lastWord:     words[words.length - 1],
    titleCase,
    reversed,
    isPalindrome: clean === cleanRev
  };
}

// Test 1: Classic palindrome sentence
console.log(analyzeText("  A man a plan a canal Panama  "));

// Test 2: Normal sentence
console.log(analyzeText("  Hello  World  "));