Mastering String Methods in JavaScript: Full Guide with Examples

Strings in JavaScript are a powerful tool, and knowing how to manipulate them with built-in methods can save you time and effort. In this guide, we'll cover the full list of string methods from charAt() to valueOf(), and provide clear examples for each one so you can master them and improve your code.

String Methods in JavaScript

1. charAt()
2. charCodeAt()
3. concat()
4. fromCharCode()
5. indexOf()
6. lastIndexOf()
7. match()
8. replace()
9. search()
10. slice()
11. split()
12. substr()
13. substring()
14. toLowerCase()
15. toUpperCase()
16. valueOf()

1. charAt()

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

• Syntax: str.charAt(index)
• Example:

  let str = "Hello";
  console.log(str.charAt(1)); // Output: "e"
  

This method is perfect when you need to access a specific character in a string.

2. charCodeAt()

The charCodeAt() method returns the Unicode value of the character at a given index.

• Syntax: str.charCodeAt(index)
• Example:

  let str = "Hello";
  console.log(str.charCodeAt(1)); // Output: 101 (Unicode value of "e")
  

This is useful if you need to work with the character's Unicode value.

3. concat()

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

• Syntax: str.concat(string2, string3, ..., stringN)
• Example:

  let str1 = "Hello";
  let str2 = " World";
  console.log(str1.concat(str2)); // Output: "Hello World"
  

You can use this to combine strings in a clean way.

4. fromCharCode()

The fromCharCode() method is a static method that converts Unicode values to characters.

• Syntax: String.fromCharCode(code1, code2, ..., codeN)
• Example:

  console.log(String.fromCharCode(72, 101, 108, 108, 111)); // Output: "Hello"
  

This is helpful when you need to convert Unicode values back into characters.

5. indexOf()

The indexOf() method returns the index of the first occurrence of a specified value in a string.

• Syntax: str.indexOf(searchValue, startIndex)
• Example:

  let str = "Hello World";
  console.log(str.indexOf("World")); // Output: 6
  

It’s handy when searching for a specific substring.

6. lastIndexOf()

The lastIndexOf() method returns the index of the last occurrence of a specified value in a string.

• Syntax: str.lastIndexOf(searchValue, startIndex)
• Example:

  let str = "Hello World";
  console.log(str.lastIndexOf("o")); // Output: 7
  

Great for finding the last occurrence of a substring.

7. match()

The match() method searches for a match between a regular expression and a string.

• Syntax: str.match(regexp)
• Example:

  let str = "Hello 123 World";
  console.log(str.match(/\d+/)); // Output: ["123"]
  

This is useful for pattern matching with regular expressions.

8. replace()

The replace() method searches for a match and replaces it with a new substring.

• Syntax: str.replace(searchValue, newValue)
• Example:

  let str = "Hello World";
  console.log(str.replace("World", "JavaScript")); // Output: "Hello JavaScript"
  

This is essential when replacing parts of a string.

9. search()

The search() method searches for a match between a regular expression and a string.

• Syntax: str.search(regexp)
• Example:

  let str = "Hello World";
  console.log(str.search(/o/)); // Output: 4
  

It returns the index of the first match found.

10. slice()

The slice() method extracts a part of a string and returns a new string.

• Syntax: str.slice(startIndex, endIndex)
• Example:

  let str = "Hello, World!";
  console.log(str.slice(0, 5)); // Output: "Hello"
  

This is a great way to extract parts of a string.

11. split()

The split() method splits a string into an array of substrings.

• Syntax: str.split(separator, limit)
• Example:

  let str = "apple,banana,orange";
  console.log(str.split(",")); // Output: ["apple", "banana", "orange"]
  

Perfect for breaking a string into parts.

12. substr()

The substr() method extracts characters from a string, starting at a specified position.

• Syntax: str.substr(startIndex, length)
• Example:

  let str = "Hello World";
  console.log(str.substr(0, 5)); // Output: "Hello"
  

Use this for extracting a portion of a string.

13. substring()

The substring() method extracts characters from a string, between two specified indices.

• Syntax: str.substring(startIndex, endIndex)
• Example:

  let str = "Hello World";
  console.log(str.substring(0, 5)); // Output: "Hello"
  

It’s similar to slice(), but with different behavior when indices are swapped.

14. toLowerCase()

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

• Syntax: str.toLowerCase()
• Example:

  let str = "HELLO";
  console.log(str.toLowerCase()); // Output: "hello"
  

Use this to standardize text to lowercase.

15. toUpperCase()

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

• Syntax: str.toUpperCase()
• Example:

  let str = "hello";
  console.log(str.toUpperCase()); // Output: "HELLO"
  

Perfect for capitalizing text.

16. valueOf()

The valueOf() method returns the primitive value of a String object.

• Syntax: str.valueOf()
• Example:

  let str = new String("Hello");
  console.log(str.valueOf()); // Output: "Hello"
  

This is useful when you need the primitive value of a string object.

Conclusion

With these string methods, you'll be able to handle a wide range of string manipulations in JavaScript with ease. From searching and replacing text to converting strings to different cases, mastering these methods is a must for every JavaScript developer.

"Learning to code is like learning a new language, and mastering strings is like knowing how to express yourself perfectly in that language."