16 JavaScript String Methods You Need to Know

Strings are a fundamental building block of every programming language, and JavaScript has many powerful built-in functions that make it easy for developers to work with strings. As a JavaScript engineer or front-end engineer, you need to know how to use the methods mentioned in this article.

1. includes

The includes() method performs a case-sensitive search to determine whether one string may be found within another string, returning true or false as appropriate.

const arrayAuthors = ["DevPoint", "DevelopPoint"];
const author = "DevPoint";
console.log([].includes(author)); // false
console.log(arrayAuthors.includes(author)); // true
console.log([1, 2].includes(author)); // false

2. indexOf

The indexOf() method is used to find the first index of the string. If the character or string to be searched is repeated multiple times, the method will only return the index value of the first occurrence.

const getStringIndex = (str, searchStr) => str.indexOf(searchStr);
console.log(getStringIndex("DevPoint", "v")); // 2
console.log(getStringIndex("DevPoint Develop Point", "P")); // 3
console.log(getStringIndex("DevPoint Develop Point", "Dev")); // 0
console.log(getStringIndex("DevPoint", "1")); // -1

3. lastIndexOf

The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex. Contrary to the result of indexOf() (the searched content exists).

const getStringLastIndex = (str, searchStr) => str.lastIndexOf(searchStr);
console.log(getStringLastIndex("DevPoint", "v")); // 2
console.log(getStringLastIndex("DevPoint Develop Point", "P")); // 17
console.log(getStringLastIndex("DevPoint Develop Point", "Dev")); // 9
console.log(getStringLastIndex("DevPoint", "1")); // -1

4. toUpperCase

The toUpperCase() method returns the calling string value converted to uppercase (the value will be converted to a string if it isn't one).

const title = "Develop Point";
console.log(title.toUpperCase()); // DEVELOP POINT

5. toLocaleLowerCase

The toLocaleLowerCase() method returns a string with all lowercase letters.

const title = "Develop Point";
console.log(title.toLocaleLowerCase()); // develop point

6. search

Use the search() method to search for a string within another string, it will return the index of the string, this method is similar to the indexOf() method.

console.log("DevPoint".search("Point")); // 3
console.log("DevPoint Develop Point".search("e")); // 1
console.log("DevPoint".search("e")); // 1

7. slice

The slice() method slices a portion of a string and returns the sliced portion in a new string. slice(), the method accepts two parameters: start index and end index. The resulting string is the sliced string between these two indices, except for the character at the end index. slice() is usually used to slice strings.

console.log("DevPoint".slice(0, 3)); // Dev
console.log("DevPoint".slice(3, 7)); // Poin, does not contain the letter t with index 7

If no last index is provided, the slice will continue searching until the end of the string:

console.log("DevPoint".slice(3)); // Point

You can also use negative parameters to intercept the string from the end of the string. If it is a negative number, it will start counting from the right.

console.log("DevPoint".slice(-5)); // Point
console.log("DevPoint".slice(-5, -1)); // Poin

8. replace

The replace() method replaces a specific value in a string with another value.

console.log("DevPoint".replace("Dev", "Develop ")); // Develop Point

9. concat

The concat() method concatenates two or more strings:

const str1 = "Develop";
const str2 = "Point";
const arrStr = [str1, " ", str2];
console.log(str1.concat(" ", str2)); // Develop Point
console.log("".concat(...arrStr)); // Develop Point

10. trim

trim() in JavaScript removes spaces from both sides of a string:

const str1 = " Develop ";
console.log(str1.trim()); // Develop

11. split

The split() method takes a pattern and divides a String into an ordered list of substrings by searching for the pattern, puts these substrings into an array, and returns the array.

const str = "The split() method takes";
const arrayWorlds = str.split(" ");
console.log(arrayWorlds); // [ 'The', 'split()', 'method', 'takes' ]

12. charAt

The charAt() method returns the character at the specified index or position in the string. String traversal is implemented using the charAt() method, the code is as follows:

const string = "DevPoint";
for (let i = 0; i < string.length; i++) {
    console.log(string.charAt(i));
}

13. charCodeAt

The charCodeAt() method returns an integer between 0 and 65535 representing the UTF-16 code unit at the given index.

const title = "Develop Point;";
console.log(title.charCodeAt(0)); // 68
console.log(title.toLocaleLowerCase().charCodeAt(0)); // 100

14. repeat

The repeat() method constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together.

const title = "Develop Point;";
console.log(title.repeat(2)); // Develop Point;Develop Point;

15. match

The match() method retrieves the results that return a string matching the regular expression. The following example searches for all uppercase letters in a string. It returns a string array of values that match the regular expression.

const title = "Develop Point;";
const regex = /[A-Z]/g;
console.log(title.match(regex)); // [ 'D', 'P' ]

16. matchAll

The matchAll() method returns an iterator containing all results matching the regular expression and grouping capture groups. Instead of creating a single array containing all matches, it creates an iterator. Compared with match(), the main difference is the difference in the return value, and there are subtle differences in the parameters (the parameter RegExp must be in the form of setting the global mode g, otherwise an exception TypeError will be thrown).

const title = "Develop Point;";
const regex = /[A-Z]/g;
const result = title.matchAll(regex);
console.log(result); // Object [RegExp String Iterator] {}
console.log([...result]);
// [
//   [ 'D', index: 0, input: 'Develop Point;', groups: undefined ],
//   [ 'P', index: 8, input: 'Develop Point;', groups: undefined ]
// ]

Thank you for reading!