Strings in JavaScript - Master Text Manipulation! 📝

A Story to Start With...

Imagine you're writing a letter to your friend. You write:

"Hello, my name is Sarah!"

This is a string - just a bunch of characters (letters, numbers, symbols) put together to make text!

In JavaScript, strings are everywhere:

Your name
A message
A website URL
An email address
Song lyrics

Today, you'll learn how to play with text like a magician! 🎩✨

What is a String? (The Super Simple Version)

A string is like a necklace of beads, where each bead is a letter or character:

const word = "HELLO";
//            01234  ← Each character has a position!
//            H E L L O

Just like arrays, each character has a position (index) starting from 0!

Creating Strings (Different Ways!)

Way 1: Double Quotes

const message = "Hello, World!";
console.log(message); // Hello, World!

Way 2: Single Quotes

const message = "Hello, World!";
console.log(message); // Hello, World!

Way 3: Backticks (Template Literals - Super Powerful!)

const name = "Sarah";
const age = 10;

// You can put variables inside with ${}
const message = `My name is ${name} and I'm ${age} years old!`;
console.log(message);
// My name is Sarah and I'm 10 years old!

Way 4: Multi-line Strings

// With backticks, you can write multiple lines!
const poem = `
  Roses are red,
  Violets are blue,
  JavaScript is awesome,
  And so are you!
`;
console.log(poem);

Accessing Characters (Getting Individual Letters!)

Remember, strings are like necklaces - each bead has a position!

const word = "HELLO";
//            01234

// Get the first letter
console.log(word[0]); // "H"

// Get the third letter
console.log(word[2]); // "L"

// Get the last letter
console.log(word[4]); // "O"

// Or use a trick for the last one!
console.log(word[word.length - 1]); // "O"

String Length - How Long is It?

const name = "Sarah";
console.log(name.length); // 5

const message = "Hello, World!";
console.log(message.length); // 13 (spaces and punctuation count!)

// Empty string
const empty = "";
console.log(empty.length); // 0

Important: Strings are Immutable! 🔒

What does "immutable" mean? It means you can't change a string once it's created!

const word = "HELLO";

// ❌ This doesn't work!
word[0] = "J"; // Trying to change "H" to "J"
console.log(word); // Still "HELLO"

// ✅ This works! Create a NEW string
const newWord = "J" + word.slice(1);
console.log(newWord); // "JELLO"

Essential String Methods! 🛠️

1. toUpperCase() & toLowerCase() - Change Case

const message = "Hello, World!";

console.log(message.toUpperCase()); // "HELLO, WORLD!"
console.log(message.toLowerCase()); // "hello, world!"

// Original string is unchanged!
console.log(message); // "Hello, World!"

Real-life example: Making usernames case-insensitive!

function login(username, password) {
  const storedUsername = "sarah123";

  // Compare in lowercase so "SARAH123" and "sarah123" both work
  if (username.toLowerCase() === storedUsername) {
    console.log("Welcome back!");
  }
}

login("SARAH123"); // Welcome back!
login("sarah123"); // Welcome back!

2. trim() - Remove Extra Spaces

const messy = "   Hello, World!   ";

console.log(messy); // "   Hello, World!   "
console.log(messy.trim()); // "Hello, World!"

// Also removes tabs and newlines!
const veryMessy = "\n\t  Hello!  \t\n";
console.log(veryMessy.trim()); // "Hello!"

Real-life example: Cleaning user input!

function processEmail(email) {
  // Remove accidental spaces
  return email.trim().toLowerCase();
}

console.log(processEmail("  Sarah@Email.com  "));
// "sarah@email.com"

3. slice() - Get a Piece of the String

const word = "HELLO";
//            01234

// Get characters from position 1 to 4 (not including 4)
console.log(word.slice(1, 4)); // "ELL"

// Get from position 2 to the end
console.log(word.slice(2)); // "LLO"

// Get the last 3 characters
console.log(word.slice(-3)); // "LLO"

Real-life example: Getting first and last name!

const fullName = "Sarah Johnson";
const spaceIndex = fullName.indexOf(" ");

const firstName = fullName.slice(0, spaceIndex);
const lastName = fullName.slice(spaceIndex + 1);

console.log(firstName); // "Sarah"
console.log(lastName); // "Johnson"

4. split() - Break String into Array

const sentence = "I love JavaScript";

// Split by spaces
const words = sentence.split(" ");
console.log(words); // ["I", "love", "JavaScript"]

// Split into individual characters
const letters = "HELLO".split("");
console.log(letters); // ["H", "E", "L", "L", "O"]

// Split by comma
const fruits = "apple,banana,orange";
const fruitArray = fruits.split(",");
console.log(fruitArray); // ["apple", "banana", "orange"]

Real-life example: Processing CSV data!

const csvLine = "Sarah,25,Engineer";
const data = csvLine.split(",");

const name = data[0];
const age = data[1];
const job = data[2];

console.log(`${name} is ${age} years old and works as a ${job}`);
// Sarah is 25 years old and works as a Engineer

5. join() - Combine Array into String

const words = ["I", "love", "JavaScript"];

// Join with spaces
console.log(words.join(" ")); // "I love JavaScript"

// Join with dashes
console.log(words.join("-")); // "I-love-JavaScript"

// Join with nothing
console.log(words.join("")); // "IloveJavaScript"

6. replace() - Replace Text

const message = "I love cats";

// Replace first occurrence
console.log(message.replace("cats", "dogs"));
// "I love dogs"

// Original is unchanged!
console.log(message); // "I love cats"

// Replace all occurrences (use replaceAll)
const text = "cat cat cat";
console.log(text.replaceAll("cat", "dog"));
// "dog dog dog"

Real-life example: Censoring bad words!

function censorBadWords(text) {
  return text.replaceAll("bad", "***").replaceAll("ugly", "***");
}

console.log(censorBadWords("This is bad and ugly"));
// "This is *** and ***"

7. includes() - Check if Text Contains Something

const message = "Hello, World!";

console.log(message.includes("World")); // true
console.log(message.includes("world")); // false (case-sensitive!)
console.log(message.includes("Bye")); // false

Real-life example: Spam filter!

function isSpam(email) {
  const spamWords = ["free money", "click here", "winner"];

  const lowerEmail = email.toLowerCase();

  for (let word of spamWords) {
    if (lowerEmail.includes(word)) {
      return true;
    }
  }

  return false;
}

console.log(isSpam("You won FREE MONEY!!!")); // true
console.log(isSpam("Hi, how are you?")); // false

8. startsWith() & endsWith() - Check Beginning/End

const filename = "photo.jpg";

console.log(filename.startsWith("photo")); // true
console.log(filename.endsWith(".jpg")); // true
console.log(filename.endsWith(".png")); // false

Real-life example: File type checker!

function isImageFile(filename) {
  return (
    filename.endsWith(".jpg") ||
    filename.endsWith(".png") ||
    filename.endsWith(".gif")
  );
}

console.log(isImageFile("cat.jpg")); // true
console.log(isImageFile("doc.pdf")); // false

9. indexOf() & lastIndexOf() - Find Position

const text = "Hello, World! Hello!";

// Find first occurrence
console.log(text.indexOf("Hello")); // 0
console.log(text.indexOf("World")); // 7
console.log(text.indexOf("Goodbye")); // -1 (not found)

// Find last occurrence
console.log(text.lastIndexOf("Hello")); // 14

10. repeat() - Repeat Text

console.log("Ha".repeat(3)); // "HaHaHa"
console.log("*".repeat(10)); // "**********"
console.log("Hello! ".repeat(2)); // "Hello! Hello! "

Real-life example: Creating patterns!

function createBorder(width) {
  return "*".repeat(width);
}

console.log(createBorder(20));
// ********************

11. charAt() - Get Character at Position

const word = "HELLO";

console.log(word.charAt(0)); // "H"
console.log(word.charAt(2)); // "L"
console.log(word.charAt(10)); // "" (empty string if out of bounds)

// Same as using brackets, but safer!
console.log(word[0]); // "H"
console.log(word[10]); // undefined

Common String Patterns (Interview Favorites!)

Pattern 1: Reverse a String

Problem: Reverse "HELLO" to "OLLEH"

function reverseString(str) {
  // Method 1: Using array methods
  return str.split("").reverse().join("");
}

console.log(reverseString("HELLO")); // "OLLEH"

// Method 2: Manual way (good for understanding!)
function reverseStringManual(str) {
  let reversed = "";

  // Go through string backwards
  for (let i = str.length - 1; i >= 0; i--) {
    reversed += str[i];
  }

  return reversed;
}

console.log(reverseStringManual("HELLO")); // "OLLEH"

Pattern 2: Palindrome Check

Problem: Check if a word reads the same forwards and backwards!

function isPalindrome(str) {
  // Clean the string (remove spaces, make lowercase)
  const cleaned = str.toLowerCase().replace(/[^a-z0-9]/g, "");

  // Compare with reversed version
  const reversed = cleaned.split("").reverse().join("");

  return cleaned === reversed;
}

console.log(isPalindrome("racecar")); // true
console.log(isPalindrome("hello")); // false
console.log(isPalindrome("A man a plan a canal Panama")); // true

Pattern 3: Count Vowels

Problem: Count how many vowels (a, e, i, o, u) are in a string!

function countVowels(str) {
  const vowels = "aeiouAEIOU";
  let count = 0;

  for (let char of str) {
    if (vowels.includes(char)) {
      count++;
    }
  }

  return count;
}

console.log(countVowels("Hello, World!")); // 3 (e, o, o)
console.log(countVowels("JavaScript")); // 3 (a, a, i)

Pattern 4: Title Case

Problem: Make the first letter of each word uppercase!

function toTitleCase(str) {
  return str
    .toLowerCase()
    .split(" ")
    .map((word) => word[0].toUpperCase() + word.slice(1))
    .join(" ");
}

console.log(toTitleCase("hello world"));
// "Hello World"

console.log(toTitleCase("the quick brown fox"));
// "The Quick Brown Fox"

Pattern 5: Remove Duplicates

Problem: Remove duplicate characters from a string!

function removeDuplicates(str) {
  let result = "";

  for (let char of str) {
    if (!result.includes(char)) {
      result += char;
    }
  }

  return result;
}

console.log(removeDuplicates("hello")); // "helo"
console.log(removeDuplicates("aabbcc")); // "abc"

// Using Set (modern way!)
function removeDuplicatesSet(str) {
  return [...new Set(str)].join("");
}

console.log(removeDuplicatesSet("hello")); // "helo"

Practice Challenges! 🎮

Challenge 1: Count Words

Count how many words are in a sentence!

function countWords(sentence) {
  // Your code here!
  // Hint: Use split!
}

console.log(countWords("I love JavaScript")); // 3
console.log(countWords("Hello, World!")); // 2

Click to see the answer!

function countWords(sentence) {
  // Split by spaces and filter out empty strings
  return sentence
    .trim()
    .split(" ")
    .filter((word) => word !== "").length;
}

// Or simpler:
function countWords(sentence) {
  return sentence.trim().split(/\s+/).length;
}

Challenge 2: Find Longest Word

Find the longest word in a sentence!

function findLongestWord(sentence) {
  // Your code here!
  // Hint: Split into words, then compare lengths!
}

console.log(findLongestWord("I love JavaScript programming"));
// "programming"

Click to see the answer!

function findLongestWord(sentence) {
  const words = sentence.split(" ");
  let longest = "";

  for (let word of words) {
    if (word.length > longest.length) {
      longest = word;
    }
  }

  return longest;
}

// Or using reduce:
function findLongestWord(sentence) {
  return sentence
    .split(" ")
    .reduce((longest, word) => (word.length > longest.length ? word : longest));
}

Challenge 3: Capitalize First Letter

Make the first letter of a string uppercase!

function capitalizeFirst(str) {
  // Your code here!
  // Hint: Get first character, make it uppercase, add the rest!
}

console.log(capitalizeFirst("hello")); // "Hello"
console.log(capitalizeFirst("world")); // "World"

Click to see the answer!

function capitalizeFirst(str) {
  if (str.length === 0) return str;
  return str[0].toUpperCase() + str.slice(1);
}

// Or even simpler:
function capitalizeFirst(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

Challenge 4: Check Anagram

Check if two words are anagrams (same letters, different order)!

function isAnagram(str1, str2) {
  // Your code here!
  // Hint: Sort the letters and compare!
}

console.log(isAnagram("listen", "silent")); // true
console.log(isAnagram("hello", "world")); // false

Click to see the answer!

function isAnagram(str1, str2) {
  // Clean and sort both strings
  const clean1 = str1.toLowerCase().replace(/[^a-z]/g, "");
  const clean2 = str2.toLowerCase().replace(/[^a-z]/g, "");

  // If lengths are different, can't be anagrams
  if (clean1.length !== clean2.length) return false;

  // Sort and compare
  const sorted1 = clean1.split("").sort().join("");
  const sorted2 = clean2.split("").sort().join("");

  return sorted1 === sorted2;
}

Challenge 5: Truncate String

Cut a string to a certain length and add "..." at the end!

function truncate(str, maxLength) {
  // Your code here!
  // Hint: Use slice and check length!
}

console.log(truncate("Hello, World!", 8));
// "Hello..."

console.log(truncate("Hi", 10));
// "Hi" (no truncation needed)

Click to see the answer!

function truncate(str, maxLength) {
  if (str.length <= maxLength) {
    return str;
  }

  return str.slice(0, maxLength - 3) + "...";
}

// Make sure the "..." fits in maxLength!

String vs Array - What's the Difference?

Feature	String	Array
Mutable?	❌ No (can't change)	✅ Yes (can change)
Elements	Characters only	Any type
Methods	String methods	Array methods
Access	`str[0]`	`arr[0]`
Length	`str.length`	`arr.length`

// String - Immutable
const str = "HELLO";
str[0] = "J"; // Doesn't work!
console.log(str); // Still "HELLO"

// Array - Mutable
const arr = ["H", "E", "L", "L", "O"];
arr[0] = "J"; // Works!
console.log(arr); // ["J", "E", "L", "L", "O"]

Common Mistakes to Avoid! ⚠️

Mistake 1: Forgetting Strings are Immutable

// ❌ Wrong - trying to modify string
const word = "HELLO";
word[0] = "J"; // Doesn't work!

// ✅ Right - create new string
const newWord = "J" + word.slice(1);

Mistake 2: Case Sensitivity

// ❌ Wrong - case matters!
"Hello" === "hello"; // false

// ✅ Right - compare in same case
"Hello".toLowerCase() === "hello".toLowerCase(); // true

Mistake 3: Forgetting to Return

// ❌ Wrong - methods don't modify original
const message = "hello";
message.toUpperCase();
console.log(message); // Still "hello"

// ✅ Right - save the result
const upper = message.toUpperCase();
console.log(upper); // "HELLO"

Performance Tips! ⚡

Tip 1: Use Template Literals for Concatenation

// ❌ Slow for many concatenations
let result = "";
for (let i = 0; i < 1000; i++) {
  result += "word ";
}

// ✅ Faster - use array and join
const words = [];
for (let i = 0; i < 1000; i++) {
  words.push("word");
}
const result = words.join(" ");

Tip 2: Use includes() Instead of indexOf()

// ❌ Less readable
if (str.indexOf("hello") !== -1) {
  // found
}

// ✅ More readable
if (str.includes("hello")) {
  // found
}

Key Takeaways! 🎯

Strings are immutable - Can't change them, only create new ones
Many useful methods - slice, split, replace, trim, etc.
Case matters - "Hello" ≠ "hello"
Indexes start at 0 - First character is at position 0
Template literals are powerful - Use backticks for variables
Practice makes perfect - Try the challenges above!

Quick Reference Card 📋

// Creating
const str = "Hello";
const str2 = `Hello ${name}`;

// Accessing
str[0]; // First character
str.length; // Length
str.charAt(0); // Safer access

// Case
str.toUpperCase(); // "HELLO"
str.toLowerCase(); // "hello"

// Trimming
str.trim(); // Remove spaces

// Slicing
str.slice(0, 3); // Get piece
str.substring(0, 3); // Alternative

// Splitting/Joining
str.split(" "); // To array
arr.join(" "); // To string

// Searching
str.includes("Hi"); // Check if contains
str.indexOf("Hi"); // Find position
str.startsWith("H"); // Check start
str.endsWith("o"); // Check end

// Replacing
str.replace("H", "J"); // Replace first
str.replaceAll("l", "L"); // Replace all

// Repeating
str.repeat(3); // Repeat string

What's Next?

In the next episode, we'll learn about Objects and Hash Maps - the most powerful data structure for organizing data!

We'll cover:

What objects are and how they work
Object methods and properties
Hash maps and dictionaries
When to use objects vs arrays
Common object patterns

This is Episode 3 of the "Mastering DSA with JavaScript" series.

Previous Episode: Arrays in JavaScript →

Next Episode: Objects & Hash Maps - The Power of Key-Value Pairs →

Questions? Drop a comment below! 💬

Strings in JavaScript - Master Text Manipulation Like a Pro! 📝

Mastering DSA with JavaScript

Episodes

Continue Reading

What is DSA? Your First Step into the World of Smart Programming 🚀

Arrays in JavaScript - Your First Data Structure (Explained Simply!) 📦

Objects & Hash Maps in JavaScript - The Power of Key-Value Pairs! 🗂️