String Methods in JavaScript

JavaScript provides many methods for working with strings. Since strings are immutable (they cannot be changed once created), these methods return new strings without altering the original one.

Basic String Methods

1. String Length

The .length property returns the number of characters in a string. This is useful for checking the length of user input.

1
2
let text = "Hello, World!";
let length = text.length; // Outputs: 13

2. charAt()

The charAt() method returns the character at a specified position in a string.

1
2
let text = "JavaScript";
let character = text.charAt(2); // Outputs: "v"

3. charCodeAt()

The charCodeAt() method returns the Unicode of the character at a specified index in the string.

1
2
let text = "JavaScript";
let unicode = text.charCodeAt(2); // Outputs: 118 (Unicode for "v")

4. at()

The at() method returns the character at a specified index. It works similarly to charAt().

1
2
let text = "JavaScript";
let character = text.at(3); // Outputs: "a"

5. Accessing Characters Using []

You can access characters in a string like an array by using square brackets.

1
2
let text = "JavaScript";
let character = text[4]; // Outputs: "S"

6. slice()

The slice() method extracts a section of a string and returns it as a new string. You can specify the start and end positions.

1
2
let text = "JavaScript is fun";
let part = text.slice(0, 10); // Outputs: "JavaScript"

7. substring()

The substring() method works like slice() but does not accept negative indexes.

1
2
let text = "JavaScript is fun";
let part = text.substring(0, 10); // Outputs: "JavaScript"

8. substr()

The substr() method extracts a specified number of characters from a starting position.

1
2
let text = "JavaScript is fun";
let part = text.substr(0, 10); // Outputs: "JavaScript"

9. toUpperCase()

The toUpperCase() method converts all characters in a string to uppercase.

1
2
let text = "hello world";
let upperText = text.toUpperCase(); // Outputs: "HELLO WORLD"

10. toLowerCase()

The toLowerCase() method converts all characters in a string to lowercase.

1
2
let text = "HELLO WORLD";
let lowerText = text.toLowerCase(); // Outputs: "hello world"

11. concat()

The concat() method joins two or more strings and returns a new string.

1
2
3
let text1 = "Hello";
let text2 = "World";
let result = text1.concat(" ", text2); // Outputs: "Hello World"

12. trim()

The trim() method removes whitespace from both sides of a string.

1
2
let text = "   Hello World   ";
let trimmedText = text.trim(); // Outputs: "Hello World"

13. trimStart()

The trimStart() method removes whitespace only from the beginning of a string.

1
2
let text = "   Hello World   ";
let trimmedStartText = text.trimStart(); // Outputs: "Hello World   "

14. trimEnd()

The trimEnd() method removes whitespace only from the end of a string.

1
2
let text = "   Hello World   ";
let trimmedEndText = text.trimEnd(); // Outputs: "   Hello World"

15. padStart()

The padStart() method pads the beginning of a string with a specified character to reach a desired length.

1
2
let text = "5";
let paddedText = text.padStart(3, "0"); // Outputs: "005"

16. padEnd()

The padEnd() method pads the end of a string with a specified character to reach a desired length.

1
2
let text = "5";
let paddedText = text.padEnd(3, "0"); // Outputs: "500"

17. repeat()

The repeat() method repeats a string a specified number of times.

1
2
let text = "Hi! ";
let repeatedText = text.repeat(3); // Outputs: "Hi! Hi! Hi! "

18. replace()

The replace() method replaces a specified value in a string with a new value. It only replaces the first occurrence.

1
2
let text = "Hello, World!";
let newText = text.replace("World", "JavaScript"); // Outputs: "Hello, JavaScript!"

19. replaceAll()

The replaceAll() method replaces all occurrences of a specified value in a string with a new value.

1
2
let text = "Hello, World! Hello again!";
let newText = text.replaceAll("Hello", "Hi"); // Outputs: "Hi, World! Hi again!"

20. split()

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

1
2
let text = "JavaScript,HTML,CSS";
let languages = text.split(","); // Outputs: ["JavaScript", "HTML", "CSS"]

Key Takeaways on JavaScript String Methods

• Immutability: JavaScript strings are immutable, meaning methods create new strings rather than changing the original.
• Length Property: .length provides the total number of characters in a string, useful for validating input length.
• Character Access: Use charAt() or square brackets ([]) to access individual characters in a string.
• String Extraction: Use slice(), substring(), or substr() to get parts of a string. slice() allows negative indexes, while substring() does not.
• Case Conversion: toUpperCase() and toLowerCase() are useful for converting text to all uppercase or lowercase.
• Whitespace Removal: trim(), trimStart(), and trimEnd() remove spaces from around or within strings, helpful for cleaning user input.
• Concatenation: Use concat() or simply + to combine strings into one.
• Padding: padStart() and padEnd() add padding to strings, useful for formatting text in fixed-width fields.
• Replacing Text: replace() replaces the first match, while replaceAll() replaces all occurrences in the string.
• Repeating Text: repeat() duplicates a string a set number of times.
• Splitting Text: split() divides a string into an array based on a specified separator, ideal for breaking up text data.