JavaScript String Methods Explained: Practical Examples Tutorial

Hello JavaScript Developers! 👋

Let’s talk about Strings — a fundamental part of any JavaScript project. Whether you're handling user input, formatting data, or working with text, string manipulation is something you’ll encounter constantly. The good news? It’s easier than you might think.

In this blog, we’ll break down the most important string methods, from simple operations to more advanced manipulations. No need for documentation once you're through with this — everything will be clear and straightforward. We’ll start with the basics and gradually work our way up, making string handling feel natural by the end.

Ready to sharpen your skills and make string manipulation effortless? Let’s begin!

Task 1 : Format and Modify a String

Imagine you have a string with a mix of uppercase and lowercase letters, and you need to format it for display. Specifically, you want to:

1. Trim any extra spaces: Remove any unnecessary or wrongly typed spaces in the text.

2. Convert the string to lowercase: The text should be in lowercase, which is the standard format.

3. Capitalize the first letter: Make the first letter of the string uppercase.

Example input string:

let text1 = "   hELLo WOrLD!   "; //good format: "Hello world!"
let text2 = " hardik  "; //good format: "Hardik"
let text3 = " i write Code !"; //good format: "I write code!"

Let's start the fun part:

1. Remove Unnecessary Spaces:
   To address the issue of unnecessary spaces, we use the trim() method.

What does it do?
The trim() method removes leading and trailing spaces from a string.

Example: " hello " becomes "hello"

let trimmedText = text.trim();
console.log(trimmedText); 
// Output: "hELLo WOrLD!"

2. Handling Irregular Capitalization: Another common issue is irregular use of uppercase and lowercase letters in a string. To address this, we can use two methods: toUpperCase() and toLowerCase().

What do these methods do?

• toUpperCase(): Converts all characters in the string to uppercase.

• toLowerCase(): Converts all characters in the string to lowercase.

Examples:

• Applying toUpperCase():

  • "hElLo" becomes "HELLO"

• Applying toLowerCase():

  • "HeLLo" becomes "hello"

let lowerCaseText = trimmedText.toLowerCase();
console.log(lowerCaseText); 
// Output: "hello world!"

3. Capitalizing First Letter: Our string is looking better, but there’s one more requirement: the first letter should be capitalized. We can achieve this by targeting just the first character and capitalizing it using the toUpperCase() method.

   Steps to Capitalize the First Letter:

   1. Target the First Character:

      Use the charAt() method, which takes an index as an argument. For the first character, the index is 0.

    let text = "hello world!";
    let firstChar = text.charAt(0).toUpperCase();
    console.log(firstChar); 
    // Output: "H"

2. Concatenate with the Rest of the String:

   To get the rest of the string starting from the second character, use the slice() method.

   • "abcdefg".slice(1) returns "bcdefg" (from the first index to the end).

   • "abcdefg".slice(1, 3) returns "bc" (from the first index to the third index, not including the third index).

    let text = "hello world!";
    let firstChar = text.charAt(0).toUpperCase();
    let restOfText = text.slice(1);
    let capitalizedText = firstChar + restOfText;
    console.log(capitalizedText); 
    // Output: "Hello world!"

Utility Function for Formatting Text: To efficiently format text, you can create a utility function that combines several string methods. Here’s a practical example of such a function:

    // Example input strings
    let text1 = "   hELLo WOrLD!   ";
    let text2 = " hardik  ";
    let text3 = " i write Code !";

    // Function to format the string
    function formatString(text) {
        // Step 1: Remove unnecessary spaces
        let trimmedText = text.trim();

        // Step 2: Convert to lowercase
        let lowerCaseText = trimmedText.toLowerCase();

        // Step 3: Capitalize the first letter
        let firstChar = lowerCaseText.charAt(0).toUpperCase();
        let restOfText = lowerCaseText.slice(1);
        let capitalizedText = firstChar + restOfText;

        return capitalizedText;
    }

    // Apply the function to each example
    console.log(formatString(text1)); // Output: "Hello world!"
    console.log(formatString(text2)); // Output: "Hardik"
    console.log(formatString(text3)); // Output: "I write code!"

Now if you see it, you’ll find that things weren’t as hard as they seemed, right?

By applying this function, you achieve neatly formatted text, ensuring consistent and readable output.

Let's see one more task to understand a few more methods.

Task 2: Reformat and Clean Up a List of Names

You have a string of names that needs a bit of cleanup and reformatting. Here’s what you need to do:

1. Trim and Format Each Name: Make sure each name is properly capitalized and doesn’t have any extra spaces.

2. Remove Duplicates : Ensure each name appears only once in the final list.

3. Create a Formatted List: Combine the names into a neatly formatted string.

Example Input String:

let names = "  Golu PANTHER,   Titu BHAI,   Chintu, chintu  ,  Bablu  ";

1. Split string into Array:

   First thing you might notice is that there could be a lot of names to handle. We need to format each one individually. Since we can distinguish between names using commas, we can convert the string into an array of names and then focus on formatting each name.

   We have a method called split() that can split a string into an array based on a delimiter.

   Examples:

   • "Hello I am Hardik".split(" ") results in the array ["Hello", "I", "am", "Hardik"]

   • "Hello,I,am,Hardik".split(",") results in ["Hello", "I", "am", "Hardik"]

   • "Hardik Dhamija".split("") results in ["H", "a", "r", "d", "i", "k", " ", "D", "h", "a", "m", "i", "j", "a"]

Using split(), you can convert the string of names into an array, which makes it easier to format each name individually.

    let nameArray = names.split(',');
    console.log(nameArray);
    // Output: ["  Golu PANTHER", "   Titu BHAI", "   Chintu", " chintu  ", "  Bablu  "]

2. Triming space from every Name:

   Now we can be specific with each name if needed, and we can map over all of them as well.

   First, let’s trim the extra spaces from all the names using the trim method, which we discussed earlier. I hope you’re familiar with how map works on an array. Basically, map iterates through all the elements of the array (in our case, all the strings) using a callback function.

    namesArray = namesArray.map(name => name.trim());
    console.log(namesArray);
    // Output: ["Golu PANTHER", "Titu BHAI", "Chintu", "chintu", "Bablu"]
   

3. Format Each Name:

   Let’s map over all elements and format each name as we did in the previous task.

    nameArray = nameArray.map(name => {
        let lowerCaseName = name.toLowerCase();
        return lowerCaseName.charAt(0).toUpperCase() + lowerCaseName.slice(1);
    });
   
    console.log(nameArray);
    // Output: ["Golu panther", "Titu bhai", "Chintu", "Chintu", "Bablu"]
   

4. Remove Duplicate Names:

   Using map in arrays definitely makes things easier for us, doesn’t it? Now, let’s address the next issue: duplicate names.

   There are several ways to tackle this problem, but let’s use set, as they are specifically designed to handle unique values. By converting an array to a set, duplicates are automatically removed. We can then convert the set back to an array. It’s simple and effective!

    let uniqueNames = [...new Set(nameArray)];
   
    console.log(uniqueNames);
    // Output: ["Golu panther", "Titu bhai", "Chintu", "Bablu"]
   

5. Make String from List:

   We’re almost there! We have well-formatted names without duplicates. Now, let’s convert this array of names back into a string.

   Similar to how split() is used to break a string into an array, the join() method is used to concatenate array elements into a string. It does the reverse of split().

    let formattedList = uniqueNames.join(', ');
    console.log(formattedList);
    // Output: "Golu panther, Titu bhai, Chintu, Bablu"
   

Utility Function for Reformatting and Cleaning Up Names: To efficiently handle and clean up your list of names, you can create a utility function that combines the steps we’ve discussed. This function will trim extra spaces, format each name, remove duplicates, and create a neat, formatted list.

function cleanAndFormatNames(names) {
    // Step 1: Split the string into an array of names
    let nameArray = names.split(',');

    // Step 2: Trim extra spaces and format each name
    nameArray = nameArray.map(name => {
        let trimmedName = name.trim().toLowerCase();
        return trimmedName.charAt(0).toUpperCase() + trimmedName.slice(1);
    });

    // Step 3: Remove duplicates
    let uniqueNames = nameArray.filter((name, index, self) => self.indexOf(name) === index);

    // Step 4: Create a formatted list
    let formattedList = uniqueNames.join(', ');

    return formattedList;
}

// Example usage with multiple Indian name strings
let names1 = "  Golu PANTHER,   Titu BHAI,   Chintu, chintu  ,  Bablu  ";
let names2 = "  Ravi,   Deepak,   Golu,  AniL   ,   Babu  ";
let names3 = "  Hema,   Rekha RAni,   jaya,  JAYA,   Sushma  ";

console.log(cleanAndFormatNames(names1));
// Output: "Golu panther, Titu bhai, Chintu, Bablu"

console.log(cleanAndFormatNames(names2));
// Output: "Ravi, Deepak, Golu, Anil, Babu"

console.log(cleanAndFormatNames(names3));
// Output: "Hema, Rekha Rani, Jaya, Sushma"

By creating this utility function, we’ve made the process of cleaning and formatting names much easier. Here’s what it does:

• Trims extra spaces from all names.

• Capitalizes each name properly.

• Removes any duplicate names.

• Formats the final list neatly.

With this handy function, you can efficiently handle similar tasks without having to write repetitive code. Now that you’ve got a good grasp on string formatting and manipulation, let’s move on to explore more string methods and their uses!

Summary

We tried to cover major methods in this part. We saw how things look tough are not actually tough if done by focussing one one part at a time.Here’s a summary of what we covered:

Covered Methods:

1. .trim(): Removes whitespace from both ends of a string.

2. .toLowerCase(): Converts all characters in a string to lowercase.

3. .toUpperCase(): Converts all characters in a string to uppercase.

4. .charAt(index): Retrieves the character at a specified index.

5. .slice(start, end): Extracts a portion of a string between two indices.

Additional Useful Methods:

1. .substring(start, end): Returns a subset of a string between two indices. Similar to .slice(), but handles negative indices differently.

   • Usage: text.substring(2, 5);

   • Example: "hello world".substring(0, 5) → "hello"

2. .concat(string1, string2, ...): Joins two or more strings into one.

   • Usage: text.concat(" world");

   • Example: "hello".concat(" world") → "hello world"

3. .replace(searchValue, newValue): Replaces occurrences of a specified substring with a new string.

   • Usage: text.replace("world", "JavaScript");

   • Example: "hello world".replace("world", "JavaScript") → "hello JavaScript"

4. .includes(searchValue): Checks if a string contains a specified substring.

   • Usage: text.includes("world");

   • Example: "hello world".includes("world") → true

5. .indexOf(searchValue): Returns the index of the first occurrence of a specified substring.

   • Usage: text.indexOf("world");

   • Example: "hello world".indexOf("world") → 6

6. .lastIndexOf(searchValue): Returns the index of the last occurrence of a specified substring.

   • Usage: text.lastIndexOf("world");

   • Example: "hello world world".lastIndexOf("world") → 12

7. .startsWith(searchValue, position): Checks if a string starts with a specified substring. Optionally, you can specify the position to start checking.

   • Usage: text.startsWith("hello");

   • Example: "hello world".startsWith("hello") → true

8. .endsWith(searchValue, length): Checks if a string ends with a specified substring. Optionally, you can specify the length of the string to check.

   • Usage: text.endsWith("world");

   • Example: "hello world".endsWith("world") → true

9. .repeat(count): Returns a new string with a specified number of copies of the original string.

   • Usage: text.repeat(3);

   • Example: "abc".repeat(3) → "abcabcabc"

With these methods, you’ll be able to handle all sorts of string tasks easily. Just keep practicing, and soon working with strings will feel like second nature!