Javascript String Methods Cheatsheet.

·

7 min read

Table of contents

I put in a lot of effort over the weekend to create a thorough cheat sheet on JavaScript. Right now, I am sharing the section on the string methods in JavaScript, and I'll make the rest of the information available as soon as I post it on other social media channels. I truly hope that you find this cheat sheet to be of great use.

JS String Methods.

JavaScript has several built-in methods for working with strings. These methods provide a comprehensive set of tools for working with strings, as they can be used to perform a wide variety of string manipulation tasks, such as searching for substrings, formatting strings, and transforming strings into arrays or other data structures.

To use these methods, this is the syntax:

string.methodName();

Some of the most commonly used string methods in JavaScript include:

  1. length: Returns the length of a string.

     let str = "Hello, World!";
     console.log(str.length);  // Output: 13
    
  2. charAt(index): Returns the character at a specified index in the string. The index is zero-based, so the first character has an index of 0, the second character has an index of 1, and so on.

     let str = "Hello, World!";
     console.log(str.charAt(0));  // Output: H
     console.log(str.charAt(7));  // Output: W
    
  3. concat(string1, string2, ...): Joins two or more strings and returns a new string that is the concatenation of all the strings. This method is often used to join several smaller strings into a single larger string.

     let str1 = "Hello";
     let str2 = "World";
     let str3 = str1.concat(", ", str2, "!");
     console.log(str3);  // Output: Hello, World!
    
  4. slice(start, end): This method returns a portion of the original string, specified by the starting and ending indices. The first argument to slice is the starting index (inclusive), and the second argument (optional) is the ending index (exclusive). If the second argument is not specified, the rest of the string will be returned.

     let str = "Hello, World!";
     console.log(str.slice(0, 5));  // Output: Hello
     console.log(str.slice(7));  // Output: World!
    
  5. indexOf(searchValue, start): This method returns the first index at which a given element can be found in the string, or -1 if it is not present. The first argument to indexOf is the value you want to search for in the string, and the second argument (optional) is the starting index from where you want to start searching.

     let str = "Hello, World!";
     console.log(str.indexOf("World"));  // Output: 7
     console.log(str.indexOf("world"));  // Output: -1
    
  6. lastIndexOf(searchValue, start): This method works similarly to indexOf, but it returns the last index at which the specified value can be found in the string. The first argument to lastIndexOf is the value you want to search for in the string, and the second argument (optional) is the starting index from where you want to start searching backwards.

    let str = "Hello, World, World!";
    console.log(str.lastIndexOf("World"));  // Output: 13
    
  7. search(regexp): This method searches a string for a specified value and returns the position of the match. The argument to search is a regular expression which can be used to specify the search criteria.

     let str = "Hello, World!";
     console.log(str.search(/o/));  // Output: 4
     console.log(str.search(/x/));  // Output: -1
    
  8. substr(start, length): This method returns a portion of the string, starting from a specified index and extending for a specified number of characters. The first argument to substr is the starting index, and the second argument is the length of the substring.

     let str = "Hello, World!";
     console.log(str.substr(0, 5));  // Output: Hello
     console.log(str.substr(7, 5));  // Output: World
    
  9. substring(start, end): This method returns a portion of the string, starting from a specified index and extending up to (but not including) a specified index. The first argument to substring is the starting index, and the second argument is the ending index.

     let str = "Hello, World!";
     console.log(str.substring(0, 5));  // Output: Hello
     console.log(str.substring(7, 12));  // Output: World
    
  10. toLowerCase(): This method returns the string value converted to lower case.

    let str = "Hello, World!";
    console.log(str.toLowerCase());  // Output: hello, world!
    
  11. toUpperCase(): This method returns the string value converted to upper case.

    let str = "Hello, World!";
    console.log(str.toUpperCase());  // Output: HELLO, WORLD!
    
  12. trim(): This method returns the string with whitespace removed from both the beginning and end of the string.

    let str = "   Hello, World!   ";
    console.log(str.trim());  // Output: Hello, World!
    
  13. split(separator, limit): This method splits a string into an array of substrings based on a specified separator, and returns the new array. The first argument to split is the separator, and the second argument (optional) is the limit on the number of substrings returned.

    let str = "Hello, World!";
    console.log(str.split(", "));  // Output: ["Hello", "World!"]
    console.log(str.split(" "));  // Output: ["Hello,", "World!"]
    
  14. replace(searchValue, replaceValue): This method replaces a specified value with another value in a string, and returns a new string. The first argument to replace is the value to search for, and the second argument is the value to replace it with.

    let str = "Hello, World!";
    console.log(str.replace("Hello", "Goodbye"));  // Output: Goodbye, World!
    
  15. startsWith(searchString, position): This method determines whether a string begins with a specified string value, and returns a boolean value. The first argument to startsWith is the value to search for, and the second argument (optional) is the starting index position.

    let str = "Hello, World!";
    console.log(str.startsWith("Hello"));  // Output: true
    console.log(str.startsWith("Hello", 6));  // Output: false
    
  16. endsWith(searchString, length): This method determines whether a string ends with a specified string value, and returns a boolean value. The first argument to endsWith is the value to search for, and the second argument (optional) is the length of the string to consider.

    let str = "Hello, World!";
    console.log(str.endsWith("World!"));  // Output: true
    console.log(str.endsWith("Hello", 5));  // Output: true
    
  17. includes(searchString, start): This method determines whether a string includes a specified value, and returns a boolean value. The first argument to includes is the value to search for, and the second argument (optional) is the starting index position.

    let str = "Hello, World!";
    console.log(str.includes("Hello"));  // Output: true
    console.log(str.includes("Hello", 6));  // Output: false
    
  18. match(regexp): This method returns an array of the results of a search for a specified regular expression in a string. The argument to match is a regular expression.

    let str = "Hello, World!";
    console.log(str.match(/o/g));  // Output: ["o", "o"]
    console.log(str.match(/x/));  // Output: null
    
  19. padStart(targetLength, padString): This method returns a new string with padding added to the beginning of the original string so that its length is at least equal to the targetLength argument. The second argument (optional) is the string to use for padding.

    let str = "Hello";
    console.log(str.padStart(10, "World!"));  // Output:
    
  20. padEnd(targetLength, padString): This method returns a new string with padding added to the end of the original string so that its length is at least equal to the targetLength argument. The second argument (optional) is the string to use for padding.

    let str = "Hello";
    console.log(str.padEnd(10, "World!"));  // Output: "HelloWorld!"
    
  21. trimStart(): This method returns a new string with whitespace removed from the beginning of the original string.

    let str = "   Hello, World!   ";
    console.log(str.trimStart());  // Output: "Hello, World!   "
    
  22. trimEnd(): This method returns a new string with whitespace removed from the end of the original string.

  23. let str = "   Hello, World!   ";
    console.log(str.trimEnd());  // Output: "   Hello, World!"
    
  24. charCodeAt(index): This method returns the Unicode character code at a specified index in a string. The argument to charCodeAt is the index of the desired character.

    let str = "Hello, World!";
    console.log(str.charCodeAt(0));  // Output: 72
    
  25. fromCharCode(code1, code2, ...): This method returns a string created from the specified Unicode values. The arguments to fromCharCode are the Unicode character codes to include in the string.

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

In conclusion, the JavaScript string methods provide a powerful set of tools for manipulating and transforming strings in your code. Whether you're working with simple strings or complex ones, these methods offer a wide range of options for searching, slicing, concatenating, converting case, and more. With this cheat sheet, you should now have a solid understanding of the most commonly used string methods, and how to use them to achieve your goals in your JavaScript projects. So go ahead and put this knowledge into practice and see how it can improve your coding experience!

Stay informed by following me, and feel free to reach out to me on Twitter.