JavaScript String Methods
Built-in methods for manipulating strings
🛠️ What are String Methods?
String methods are built-in functions that allow you to manipulate and work with strings. They help you transform, search, and extract information from strings.
let text = "Hello World";
// Using string methods
let upperCase = text.toUpperCase(); // "HELLO WORLD"
let length = text.length; // 11
let firstChar = text.charAt(0); // "H"
console.log(upperCase, length, firstChar);
Output:
HELLO WORLD 11 H
Common String Methods
Case Methods
Change text case
text.toUpperCase() // "HELLO"
text.toLowerCase() // "hello"Extract Methods
Get parts of strings
text.slice(0, 5) // "Hello"
text.substring(0, 5) // "Hello"
text.substr(0, 5) // "Hello"Replace Methods
Replace text content
text.replace("Hello", "Hi")
text.replaceAll("l", "L")Trim Methods
Remove whitespace
text.trim() // Remove both ends
text.trimStart() // Remove start
text.trimEnd() // Remove end🔹 Case Conversion Methods
Methods to change the case of strings:
let text = "Hello World JavaScript";
// Convert to uppercase
let upper = text.toUpperCase();
console.log("Uppercase:", upper);
// Convert to lowercase
let lower = text.toLowerCase();
console.log("Lowercase:", lower);
// Capitalize first letter (custom function)
function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}
let capitalized = capitalize("hello world");
console.log("Capitalized:", capitalized);Output:
Uppercase: HELLO WORLD JAVASCRIPT
Lowercase: hello world javascript
Capitalized: Hello world
🔹 String Extraction Methods
Methods to extract parts of strings:
let text = "JavaScript Programming";
// slice(start, end) - extracts a section
let slice1 = text.slice(0, 10); // "JavaScript"
let slice2 = text.slice(11); // "Programming"
let slice3 = text.slice(-11); // "Programming"
// substring(start, end) - similar to slice
let sub1 = text.substring(0, 10); // "JavaScript"
let sub2 = text.substring(11, 22); // "Programming"
// substr(start, length) - deprecated but still used
let substr1 = text.substr(0, 10); // "JavaScript"
let substr2 = text.substr(11, 11); // "Programming"
console.log("Slice:", slice1, slice2, slice3);
console.log("Substring:", sub1, sub2);
console.log("Substr:", substr1, substr2);Output:
Slice: JavaScript Programming Programming
Substring: JavaScript Programming
Substr: JavaScript Programming
🔹 String Replace Methods
Methods to replace content in strings:
let text = "Hello World, Hello Universe";
// replace() - replaces first occurrence
let replace1 = text.replace("Hello", "Hi");
console.log("Replace first:", replace1);
// replaceAll() - replaces all occurrences
let replace2 = text.replaceAll("Hello", "Hi");
console.log("Replace all:", replace2);
// Using regular expressions
let replace3 = text.replace(/Hello/g, "Hi"); // Global flag
console.log("Replace with regex:", replace3);
// Case-insensitive replacement
let replace4 = text.replace(/hello/gi, "Hi"); // Global + ignore case
console.log("Case-insensitive:", replace4);Output:
Replace first: Hi World, Hello Universe
Replace all: Hi World, Hi Universe
Replace with regex: Hi World, Hi Universe
Case-insensitive: Hi World, Hi Universe
🔹 String Trim Methods
Methods to remove whitespace from strings:
let text = " Hello World ";
// trim() - removes whitespace from both ends
let trimmed = text.trim();
console.log("Trimmed:", `"${trimmed}"`);
// trimStart() or trimLeft() - removes from start
let trimStart = text.trimStart();
console.log("Trim start:", `"${trimStart}"`);
// trimEnd() or trimRight() - removes from end
let trimEnd = text.trimEnd();
console.log("Trim end:", `"${trimEnd}"`);
// Original string remains unchanged
console.log("Original:", `"${text}"`);Output:
Trimmed: "Hello World"
Trim start: "Hello World "
Trim end: " Hello World"
Original: " Hello World "
🔹 Other Useful String Methods
Additional helpful string methods:
let text = "JavaScript";
// charAt() - get character at index
console.log("Character at index 4:", text.charAt(4));
// charCodeAt() - get Unicode value
console.log("Unicode at index 0:", text.charCodeAt(0));
// concat() - join strings
let result = text.concat(" is", " awesome");
console.log("Concatenated:", result);
// repeat() - repeat string
let repeated = "Ha".repeat(3);
console.log("Repeated:", repeated);
// split() - convert to array
let words = "apple,banana,orange".split(",");
console.log("Split:", words);
// padStart() and padEnd() - add padding
let padded = "5".padStart(3, "0");
console.log("Padded:", padded);Output:
Character at index 4: S
Unicode at index 0: 74
Concatenated: JavaScript is awesome
Repeated: HaHaHa
Split: ["apple", "banana", "orange"]
Padded: 005