JavaScript String Methods

Q: What's the difference between slice() and substring() in JavaScript?

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.

Q: How do I replace all occurrences of a word in a string?

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.

Q: How do I convert a sentence into dashed words in JavaScript?

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' .

Q: How do I pad a number string to a fixed width like '007'?

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.

Q: How do startsWith() and endsWith() verify boundaries?

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.

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

TL;DR

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

Jump to section

#Extracting Substrings
#Finding and Checking
#Replace and Transform
#Split and Join
#Trimming and Padding

Tips

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

Warnings

01Avoid using the deprecated substr() method because it is not supported in some modern environments and libraries.
02Remember that JavaScript strings are immutable, meaning methods like trim() and replace() always return new string values.

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"

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

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"

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"]

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); // "----------"

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.

01Trim leading and trailing whitespace from the raw user input.
02Split the cleaned string into an array of individual words.
03Map over each word to isolate and capitalize its first character.
04Convert the remaining characters of each word to lowercase form.
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(" ");
}

FAQ

What's the difference between slice() and substring() in JavaScript?

How do I replace all occurrences of a word in a string?

How do I convert a sentence into dashed words in JavaScript?

How do I pad a number string to a fixed width like '007'?

How do startsWith() and endsWith() verify boundaries?