JavaScript String Methods

Strings are fundamental to programming. JavaScript provides powerful methods for creating, searching, and manipulating strings.

📝 What are Strings?

A string is a sequence of characters used to represent text. In JavaScript, strings are immutable primitive values.

String Characteristics:

Immutable (cannot be changed once created)
Zero-based indexing for characters
Can be created with '', "", or ``
Have a length property
Many built-in methods for manipulation

💡 String Creation Methods

// Single quotes
let s1 = 'Hello';

// Double quotes  
let s2 = "World";

// Backticks (template literals)
let s3 = `Hello ${s2}`;

// String constructor
let s4 = new String("String object");

// String.fromCharCode()
let s5 = String.fromCharCode(72, 101, 108, 108, 111);

Escape Sequences:

\\' Single quote
\\" Double quote
\\\\ Backslash
\\n New line
\\t Tab

🔧 Basic String Methods

Let's explore basic string creation, access, and common methods.

JavaScript Editor

Access

str[index]
str.charAt(index)

Case

str.toUpperCase()
str.toLowerCase()

Check

str.startsWith()
str.endsWith()
str.includes()

Repeat

str.repeat(count)

🔍 String Search Methods

JavaScript provides various methods for searching within strings.

JavaScript Editor

Position Search

indexOf() - First occurrence
lastIndexOf() - Last occurrence
search() - Regex position

Match Search

match() - Regex matches
matchAll() - All regex matches
includes() - Check inclusion

Character Check

charAt() - Character at index
charCodeAt() - Unicode at index
codePointAt() - Full Unicode

✂️ String Extraction Methods

Extract parts of strings using various methods.

JavaScript Editor

// String Extraction Methods
let sentence = "The quick brown fox jumps over the lazy dog";

// slice() - extracts section and returns new string
console.log("Slice(4, 9):", sentence.slice(4, 9)); // "quick"
console.log("Slice(-9, -5):", sentence.slice(-9, -5)); // "lazy"
console.log("Slice(10):", sentence.slice(10)); // "brown fox jumps over the lazy dog"

// substring() - similar to slice but can't use negative indexes
console.log("\nSubstring(4, 9):", sentence.substring(4, 9)); // "quick"
console.log("Substring(10):", sentence.substring(10)); // "brown fox jumps over the lazy dog"

// substr() - deprecated but still used
console.log("\nSubstr(4, 5):", sentence.substr(4, 5)); // "quick"

// Split() - split string into array
let words = sentence.split(" ");
console.log("\nSplit by space:");
console.log(words);
console.log("First word:", words[0]);
console.log("Number of words:", words.length);

// Split with limit
let firstThreeWords = sentence.split(" ", 3);
console.log("\nFirst 3 words:", firstThreeWords);

📌 slice() vs substring() vs substr():

slice(start, end) - Can use negative indexes, most flexible
substring(start, end) - Swaps if start > end, no negative indexes
substr(start, length) - Deprecated, uses length instead of end
Recommendation: Use slice() for most cases

✨ String Modification Methods

Modify strings by replacing, trimming, padding, and concatenating.

JavaScript Editor

// String Modification Methods
let text = "   Hello, JavaScript World!   ";

// replace() - replace text
console.log("\nReplace 'JavaScript' with 'JS':");
console.log(text.replace("JavaScript", "JS"));

// replaceAll() - replace all occurrences (ES2021)
let repeatedText = "cat dog cat bird cat fish";
console.log("\nReplace all 'cat' with 'CAT':");
console.log(repeatedText.replaceAll("cat", "CAT"));

// replace with regex (global)
console.log("\nReplace all vowels with '*':");
console.log(text.replace(/[aeiou]/gi, "*"));

// padStart() and padEnd()
let number = "5";
console.log("\nPad start:", number.padStart(3, "0")); // "005"
console.log("Pad end:", number.padEnd(3, "0")); // "500"

// concat()
let str1 = "Hello";
let str2 = "World";
console.log("\nConcatenated:", str1.concat(", ", str2, "!"));

Trim

trim()
trimStart()
trimEnd()

Replace

replace()
replaceAll()
replace(regex)

Pad

padStart()
padEnd()

💎 Template Literals (ES6)

Template literals provide an easy way to create strings with embedded expressions and multi-line support.

JavaScript Editor

🎯 Template Literal Features:

String interpolation - Embed expressions with {$ {expression}}
Multi-line strings - No need for \\n or concatenation
Tagged templates - Process template literals with functions
Raw strings - Access raw template string with String.raw
Nested templates - Template literals inside expressions

🎮 String Practice Exercises

Implement the string manipulation functions below.

JavaScript Editor

💪 Additional Challenges:

Implement URL slug generator
Create string compression (run-length encoding)
Build a simple markdown parser
Implement search highlighting function
Create a function to generate random strings

📋 Quick Reference

Common Methods:

length - String length
toUpperCase()/toLowerCase() - Case change
trim() - Remove whitespace
split() - Split into array
slice() - Extract substring

Search Methods:

indexOf()/lastIndexOf() - Find position
includes() - Check inclusion
startsWith()/endsWith() - Check start/end
match()/matchAll() - Regex matching
search() - Regex position

← Objects Number Methods →

JavaScript Tutorial

JavaScript String Methods

📝 What are Strings?

String Characteristics:

💡 String Creation Methods

Escape Sequences:

🔧 Basic String Methods

Access

Case

Check

Repeat

🔍 String Search Methods

Position Search

Match Search

Character Check

✂️ String Extraction Methods

📌 slice() vs substring() vs substr():

✨ String Modification Methods

Trim

Replace

Pad

💎 Template Literals (ES6)

🎯 Template Literal Features:

🎮 String Practice Exercises

💪 Additional Challenges:

📋 Quick Reference

Common Methods:

Search Methods:

Follow Us

Our Tools

Our Company

Special Tools