Useful Cheatsheetsusefulcheatsheets.com
JavaScript String Methods
Chapter 10 · Page 81
Beginner

JavaScript String Methods

Master string manipulation with substring, slice, replace, split, and common text operations.

TL;DR

  1. 01Use slice() and substring() to extract portions of strings.
  2. 02Use replace() and replaceAll() to substitute text inside strings.
  3. 03Use split() and join() to convert between strings and arrays.

Tips

  1. 01Use includes() instead of indexOf() !== -1 to write cleaner, more readable boolean search checks on strings.
  2. 02Use localeCompare() instead of comparison operators when sorting strings containing accented characters to ensure correct alphabetical ordering.

Warnings

  1. 01Avoid using the deprecated substr() method because it is not supported in some modern environments and libraries.
  2. 02Remember that JavaScript strings are immutable, meaning methods like trim() and replace() always return new string values.
Notes
Useful Cheatsheetsusefulcheatsheets.com
JavaScript String Methods
Chapter 10 · Page 82
Beginner

JavaScript String Methods

(continued)

Extracting Substrings

  • slice()

    Extracts a section of a string and returns it as a new string.

    const text = "Hello World";
    const res = text.slice(0, 5); // "Hello"
    const word = text.slice(-5);  // "World"
  • substring()

    Extracts characters between two indices, treating negative index numbers as zero.

    const text = "Hello";
    const res = text.substring(1, 4); // "ell"
  • substr()

    Extracts a substring starting at an index for a specified character length.

    const text = "Hello";
    const res = text.substr(1, 3); // "ell"
Notes
Useful Cheatsheetsusefulcheatsheets.com
JavaScript String Methods
Chapter 10 · Page 83
Beginner

JavaScript String Methods

(continued)

Finding and Checking

  • indexOf()

    Returns the index of the first occurrence of a specified substring.

    const text = "hello world";
    text.indexOf("world"); // 6
    text.indexOf("xyz");   // -1
  • includes()

    Performs a case-sensitive search to determine if a substring exists.

    const text = "hello world";
    text.includes("world"); // true
  • startsWith()

    Checks if a string begins with the characters of a specified string.

    const text = "hello";
    text.startsWith("he"); // true
  • search()

    Executes a regular expression search and returns the first matching index.

    const text = "hello123";
    text.search(/\d+/); // 5
Notes
Useful Cheatsheetsusefulcheatsheets.com
JavaScript String Methods
Chapter 10 · Page 84
Beginner

JavaScript String Methods

(continued)

Replace and Transform

  • replace()

    Replaces the first match of a substring or regular expression pattern.

    const text = "hello world";
    text.replace("world", "there"); // "hello there"
  • replaceAll()

    Replaces all occurrences of a literal substring or global regex pattern.

    const text = "hello hello";
    text.replaceAll("hello", "hi"); // "hi hi"
  • Case conversion

    Transforms all characters in a string to uppercase or lowercase forms.

    const text = "Hello";
    text.toUpperCase(); // "HELLO"
    text.toLowerCase(); // "hello"
  • Replace callback

    Uses a replacement function to compute custom replacements for each match.

    const text = "hello world";
    const title = text.replace(
      /\b\w/g,
      ch => ch.toUpperCase()
    );
    // "Hello World"
Notes
Useful Cheatsheetsusefulcheatsheets.com
JavaScript String Methods
Chapter 10 · Page 85
Beginner

JavaScript String Methods

(continued)

Split and Join

  • split()

    Splits a string into an array of substrings using a separator.

    const text = "a,b,c";
    text.split(","); // ["a", "b", "c"]
  • join()

    Concatenates all elements of an array into a single string separator.

    ["a", "b", "c"].join(","); // "a,b,c"
  • split limit

    Truncates the resulting array to a specified maximum number of elements.

    const text = "a,b,c,d";
    text.split(",", 2); // ["a", "b"]
  • regex split

    Splits a string using a regular expression to match multiple separators.

    const text = "one, two; three";
    text.split(/[,;]\s*/); // ["one", "two", "three"]
Notes
Useful Cheatsheetsusefulcheatsheets.com
JavaScript String Methods
Chapter 10 · Page 86
Beginner

JavaScript String Methods

(continued)

Trimming and Padding

  • trim()

    Removes whitespace characters from both the beginning and end of strings.

    const text = "  hello  ";
    text.trim(); // "hello"
  • trimStart()

    Removes whitespace characters only from the beginning of a string.

    const text = "  hello";
    text.trimStart(); // "hello"
  • padStart()

    Pads the current string from the start with a given fill character.

    const text = "5";
    text.padStart(3, "0"); // "005"
  • repeat()

    Returns a new string containing the specified number of concatenated copies.

    const text = "-";
    text.repeat(10); // "----------"
Notes
Useful Cheatsheetsusefulcheatsheets.com
JavaScript String Methods
Chapter 10 · Page 87
Beginner

JavaScript String Methods

(FAQ)

FAQ

Both methods extract parts of strings using start and end indices. However, slice() supports negative indices to count from the end of the string. The substring() method treats negative values as zero. Prefer slice() for its flexibility.

Use replaceAll('old', 'new') to replace every match of a literal substring. Alternatively, use a regular expression with the global flag like replace(/pattern/g, 'new'). The standard replace() method only replaces the first occurrence.

Chain the split() and join() methods to transform the text. For example, 'hello world'.split(' ') creates an array of words. Rejoin them using .join('-') to produce the dashed string 'hello-world'.

Use padStart(targetLength, padChar) to insert characters from the left. For example, '7'.padStart(3, '0') outputs '007'. To pad from the right, use padEnd() instead.

These methods perform clean boolean checks to verify string boundaries. They return true if the string starts or ends with the target substring. Both methods accept an optional index to adjust the search boundary.

Useful Cheatsheetsusefulcheatsheets.com
JavaScript String Methods
Chapter 10 · Page 88
Beginner

JavaScript String Methods

(In Practice)
In Practice

Formatting and Normalizing User Names

Cleans up messy text inputs by trimming excess whitespace and capitalizing the first letter of each name word.

  1. 01Trim leading and trailing whitespace from the raw user input.
  2. 02Split the cleaned string into an array of individual words.
  3. 03Map over each word to isolate and capitalize its first character.
  4. 04Convert the remaining characters of each word to lowercase form.
  5. 05Rejoin the capitalized words back into a single space-separated string.
function cleanName(rawName) {
  const trimmed = rawName.trim();
  if (!trimmed) return "";
  const words = trimmed.split(/\s+/);
  const capitalized = words.map(w => {
    const first = w[0].toUpperCase();
    const rest = w.slice(1).toLowerCase();
    return first + rest;
  });
  return capitalized.join(" ");
}
Takeaway

Chain trimming, splitting, mapping, and joining to build powerful and clean text normalization pipelines.