JavaScript String Methods 🧵 & Slicing ✂️!
Useful JavaScript STRING METHODS 🚀
1. Quick Overview 🏎️
String methods in JavaScript provide numerous ways to manipulate and transform text, offering flexibility for handling strings, from accessing characters to modifying cases.
2. .charAt(index) 🧩
Description: Returns the character at the specified index in a string. The index starts from 0.
let userName = "Bro Code";
console.log(userName.charAt(0)); // Output: "B"
What's happening?.charAt() accesses the character at the specified index, allowing you to retrieve individual characters from the string.
3. .indexOf(searchValue) 🔍
Description: Finds the index of the first occurrence of the specified value in a string. Returns -1 if the value is not found.
console.log(userName.indexOf("o")); // Output: 2
What's happening?
This method helps you locate the first occurrence of a character or substring.
4. .lastIndexOf(searchValue) 🔙
Description: Returns the index of the last occurrence of a specified value in the string.
console.log(userName.lastIndexOf("o")); // Output: 4
What's happening?.lastIndexOf() searches for the last occurrence of a character or substring.
5. .length 📏
Description: Returns the total number of characters in the string.
console.log(userName.length); // Output: 8
What's happening?
This property is useful for determining how long a string is, including spaces.
6. .trim() ✂️
Description: Removes whitespace from both ends of a string.
userName = " Bro Code ";
console.log(userName.trim()); // Output: "Bro Code"
What's happening?.trim() cleans up unnecessary spaces from user inputs or data.
7. .toUpperCase() and .toLowerCase() 🔡
Description: Converts the entire string to uppercase or lowercase, respectively.
console.log(userName.toUpperCase()); // Output: "BRO CODE"
console.log(userName.toLowerCase()); // Output: "bro code"
What's happening?
Use .toUpperCase() to convert all letters to uppercase, and .toLowerCase() for lowercase. Great for comparisons and formatting.
8. .repeat(count) ♻️
Description: Repeats a string multiple times based on the specified count.
console.log(userName.repeat(3)); // Output: "Bro CodeBro CodeBro Code"
What's happening?
This method repeats the string a specified number of times.
9. .startsWith(searchString) and .endsWith(searchString) 🚦
Description: Checks if a string starts or ends with the specified substring. Returns true or false.
let result = userName.startsWith("Bro");
console.log(result); // Output: true
What's happening?
These methods are useful for checking if a string starts or ends with a particular value.
10. .includes(searchString) 🔍
Description: Checks if a string contains the specified substring. Returns true or false.
let result = userName.includes("Code");
console.log(result); // Output: true
What's happening?.includes() helps you quickly check for the presence of a substring in a string.
11. .replaceAll(searchValue, newValue) 🔄
Description: Replaces all occurrences of a substring with a new substring.
let phoneNumber = "123-456-7890";
phoneNumber = phoneNumber.replaceAll("-", "");
console.log(phoneNumber); // Output: "1234567890"
What's happening?.replaceAll() transforms strings by replacing specified characters or patterns.
12. .padStart(targetLength, padString) and .padEnd(targetLength, padString) 📏
Description: Pads the current string with another string until the total length reaches the target length.
let paddedNumber = phoneNumber.padStart(15, "0");
console.log(paddedNumber); // Output: "000001234567890"
What's happening?
Use these methods to pad strings from the start or end, often for formatting purposes.
JavaScript STRING SLICING ✂️
1. Quick Overview 🏎️
String slicing is a technique to extract portions of a string using indices, allowing you to create substrings easily.
2. Basic Example: Extracting Substrings 📧
You can slice strings by providing start and end indices.
let fullName = "Bro Code";
let firstName = fullName.slice(0, 3); // Output: "Bro"
let lastName = fullName.slice(4); // Output: "Code"
What's happening?.slice(0, 3) extracts characters from index 0 to 3 (excluding 3), and .slice(4) grabs everything from index 4 to the end.
3. Extracting Email Components 📧
Easily grab the username and domain from an email address.
let email = "Bro1@gmail.com";
let username = email.slice(0, email.indexOf("@")); // Output: "Bro1"
let domain = email.slice(email.indexOf("@") + 1); // Output: "gmail.com"
What's happening?.slice(0, email.indexOf("@")) extracts the part before the "@" symbol, and .slice(email.indexOf("@") + 1) grabs everything after it.
4. Negative Indices ➖
Use negative indices to slice from the end of the string.
let lastChar = fullName.slice(-1); // Output: "e"
What's happening?.slice(-1) extracts the last character of the string.
5. Dynamic Slicing with Spaces 🔄
Extract parts of a string dynamically using the index of spaces.
let firstName = fullName.slice(0, fullName.indexOf(" ")); // Output: "Bro"
let lastName = fullName.slice(fullName.indexOf(" ") + 1); // Output: "Code"
What's happening?
This approach uses .indexOf() to dynamically find the space between words and extract substrings.
6. Extended Example: Email Slicing ✂️
Another way to slice emails, demonstrating flexibility.
let email = "example@gmail.com";
let username = email.slice(0, email.indexOf("@")); // Output: "example"
let domain = email.slice(email.indexOf("@") + 1); // Output: "gmail.com"
What's happening?
This example shows how to extract parts of an email using .slice() and .indexOf() for flexibility in handling different email structures.
