String Methods (split, join, substring, replaceAll, and More)

In the previous chapter, you learned the basics of strings and some commonly used methods.
In this chapter, we will explore more powerful string methods that help you:

• Search text

• Extract parts of text

• Replace content

• Break text into pieces

• Join text together

• Clean and format strings

These methods are very important in web development, form validation, search features, and working with APIs.

1. split()

The split() method breaks a string into an array based on a separator.

Example: Split by space

let text = "Learn JavaScript Today";

let parts = text.split(" ");

console.log(parts);

Output:

["Learn", "JavaScript", "Today"]

Example: Split by comma

let items = "pen,book,pencil";

console.log(items.split(","));

Output:

["pen", "book", "pencil"]

2. join()

The join() method does the opposite of split —
it joins an array into a string.

let words = ["Learn", "JavaScript", "Now"];

let sentence = words.join(" ");

console.log(sentence);

Output:

Learn JavaScript Now

3. substring()

The substring() method extracts text between positions.

let word = "JavaScript";

console.log(word.substring(0, 4)); // Javaconsole.log(word.substring(4));    // Script

Difference Between slice() and substring()

4. replaceAll()

The replaceAll() method replaces all matching words.

let msg = "JavaScript is fun. I love JavaScript.";

let updated = msg.replaceAll("JavaScript", "Python");

console.log(updated);

Output:

Python is fun. I love Python.

5. startsWith() and endsWith()

startsWith()

let name = "JavaScript";

console.log(name.startsWith("Java"));

Output:

true

endsWith()

console.log(name.endsWith("Script"));

Output:

true

These are useful for search, filters, and validations.

6. charAt()

Returns the character at a specific index.

let word = "Hello";

console.log(word.charAt(1));

Output:

e

7. charCodeAt()

Returns the ASCII/Unicode code of a character.

console.log("A".charCodeAt(0));

Output:

65

8. repeat()

Repeats a string multiple times.

let msg = "Hi! ";

console.log(msg.repeat(3));

Output:

Hi! Hi! Hi! 

9. trimStart() and trimEnd()

trimStart()

console.log("   Hello".trimStart());

trimEnd()

console.log("Hello   ".trimEnd());

10. padStart() and padEnd()

Useful for formatting numbers (like OTP, IDs).

padStart()

let id = "5";

console.log(id.padStart(3, "0"));

Output:

005

padEnd()

console.log(id.padEnd(3, "*"));

Output:

5**

Real-Life Example: Creating a Username From Email

let email = "[email protected]";

let username = email.split("@")[0];

console.log(username);

Output:

aman123

Real-Life Example: Format Numbers (Bank/UPI style)

let acc = "1234";

console.log(acc.padStart(8, "*"));

Output:

****1234

Real-Life Example: Convert Paragraph to Words

let para = "JavaScript is easy to learn";

let words = para.split(" ");

console.log(words);

Example Program (Complete)

let text = "JavaScript is awesome. JavaScript is powerful.";

// Replace alllet newText = text.replaceAll("JavaScript", "Python");

// Split into wordslet words = newText.split(" ");

// Join back into sentencelet final = words.join("-");

console.log(newText);
console.log(words);
console.log(final);

Output:

Python is awesome. Python is powerful.
["Python", "is", "awesome.", "Python", "is", "powerful."]
Python-is-awesome.-Python-is-powerful.

Common Mistakes Beginners Make

1. Using replace() instead of replaceAll()

2. Thinking split returns a string (it returns an array)

3. Using join() on a string instead of an array

4. Using slice and substring interchangeably

5. Forgetting that text indexes start from 0

Practice Tasks (Do It Yourself)

1. Split a sentence into an array of words.

2. Convert an array of 5 colors into a sentence using join().

3. Extract the first 4 letters using substring().

4. Replace all spaces with hyphens using replaceAll().

5. Check if a word starts with “Learn”.

6. Format a number using padStart().

7. Trim extra spaces from both ends of a string.