JavaScript String Manipulation: Complete Methods Guide

Here is the complete list of JavaScript string manipulation methods categorized by their primary functions.

What is a JavaScript String?

A JavaScript string is an immutable sequence of characters used to represent text. Strings can be created using single quotes, double quotes, or backticks (template literals).

String creation:

const str1 = 'Hello';
const str2 = "World";
const str3 = `Hello ${str2}`;

console.log(str3); // "Hello World"

String Properties

.length

Returns the number of characters in a string.

const text = "JavaScript";
console.log(text.length); // 10

String Case Methods

.toUpperCase()

Converts all characters to uppercase.

const text = "Hello World";
console.log(text.toUpperCase()); // "HELLO WORLD"

.toLowerCase()

Converts all characters to lowercase.

const text = "Hello World";
console.log(text.toLowerCase()); // "hello world"

Use these for case-insensitive comparisons or formatting output.

String Trimming Methods

.trim()

Removes whitespace from both ends of a string (spaces, tabs, newlines).

const text = "  Hello World  ";
console.log(text.trim()); // "Hello World"

.trimStart() / .trimLeft()

Removes whitespace from the start only.

const text = "  Hello World  ";
console.log(text.trimStart()); // "Hello World  "

.trimEnd() / .trimRight()

Removes whitespace from the end only.

const text = "  Hello World  ";
console.log(text.trimEnd()); // "  Hello World"

Use trimming methods for cleaning user input and form data

String Search and Finding

.indexOf(searchValue, fromIndex?)

Returns the index of the first occurrence of a substring, or -1 if not found.

const text = "Hello World, Hello JavaScript";
console.log(text.indexOf("Hello"));     // 0
console.log(text.indexOf("Hello", 10)); // 14
console.log(text.indexOf("Python"));    // -1

.lastIndexOf(searchValue, fromIndex?)

Returns the index of the last occurrence of a substring.

const text = "Hello World, Hello JavaScript";
console.log(text.lastIndexOf("Hello")); // 14

.includes(searchString, position?)

Returns true if the string contains the substring, false otherwise.

const text = "JavaScript is awesome";
console.log(text.includes("awesome")); // true
console.log(text.includes("Python"));  // false

.startsWith(searchString, position?)

Checks if the string starts with a given substring.

const url = "https://example.com";
console.log(url.startsWith("https")); // true

.endsWith(searchString, length?)

Checks if the string ends with a given substring.

const email = "user@example.com";
console.log(email.endsWith(".com")); // true

Use these methods for validation, filtering, and conditional logic

String Extraction Methods

.charAt(index)

Returns the character at a specified index.

const text = "JavaScript";
console.log(text.charAt(0));  // "J"
console.log(text.charAt(10)); // "" (empty string if out of range)

.charCodeAt(index)

Returns the Unicode code point of a character at a specified index.

const text = "C";
console.log(text.charCodeAt(0));

.substring(start, end?)

Returns a substring between two indices (end is exclusive). Doesn't accept negative indices.

const text = "JavaScript";
console.log(text.substring(0, 4));  // "Java"
console.log(text.substring(4));     // "Script"

.slice(start, end?)

Returns a substring between two indices. Accepts negative indices (counting from end).

const text = "JavaScript";
console.log(text.slice(0, 4));   // "Java"
console.log(text.slice(-6));     // "Script"
console.log(text.slice(4, -2));  // "Scri"

Use slice() over substring() — it's more versatile.

String Replacement Methods

.replace(searchValue, replaceValue)

Replaces the first occurrence of a substring or regex pattern.

const text = "Hello World, Hello JavaScript";
console.log(text.replace("Hello", "Hi")); 
// "Hi World, Hello JavaScript"

With regex (replace all):

const text = "Hello World, Hello JavaScript";
console.log(text.replace(/Hello/g, "Hi")); 
// "Hi World, Hi JavaScript"

.replaceAll(searchValue, replaceValue)

Replaces all occurrences of a substring (modern alternative to regex).

const text = "Hello World, Hello JavaScript";
console.log(text.replaceAll("Hello", "Hi")); 
// "Hi World, Hi JavaScript"

Use for simple string replacements without regex complexity

String Splitting and Joining

.split(separator, limit?)

Splits a string into an array of substrings based on a separator.

const csv = "apple,banana,orange";
console.log(csv.split(",")); // ["apple", "banana", "orange"]

const text = "Hello World";
console.log(text.split(""));  // ["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]

const limited = csv.split(",", 2); // ["apple", "banana"]

Combining with Array Methods:

const names = "Alice, Bob, Carol";
const nameArray = names
  .split(", ")
  .map(name => name.toUpperCase());

console.log(nameArray); // ["ALICE", "BOB", "CAROL"]

String Padding Methods

.padStart(targetLength, padString)

Pads the start of a string to reach a target length.

const num = "5";
console.log(num.padStart(3, "0")); // "005"

const text = "Hi";
console.log(text.padStart(10, "-")); // "--------Hi"

Use for formatting numbers, IDs, and alignment

.padEnd(targetLength, padString)

Pads the end of a string.

const text = "Hi";
console.log(text.padEnd(10, "-")); // "Hi--------"

String Repetition

.repeat(count)

Returns a string repeated a specified number of times.

const str = "Ha";
console.log(str.repeat(3)); // "HaHaHa"

const line = "-".repeat(20); // "--------------------"

Use for creating separators, repeated patterns, or visual elements

String Matching and Regular Expressions

.match(regex)

Returns an array of matches against a regular expression.

const text = "I have 2 apples and 3 oranges";
const numbers = text.match(/\d+/g);

console.log(numbers); // ["2", "3"]

.search(regex)

Returns the index of the first match against a regex, or -1 if no match.

const text = "Hello JavaScript";
console.log(text.search(/Java/)); // 6
console.log(text.search(/Python/)); // -1

.matchAll(regex)

Returns an iterator of all matches with capture groups.

const text = "cat dog cat";
const matches = text.matchAll(/cat/g);

for (const match of matches) {
  console.log(match[0]); // "cat", then "cat" again
}

Template Literals

Template literals allow string interpolation and multi-line strings using backticks.

const name = "Alice";
const age = 30;

const greeting = `Hello, my name is ${name} and I'm ${age} years old`;
console.log(greeting);
// "Hello, my name is Alice and I'm 30 years old"

Multi-line strings:

const poem = `
Roses are red,
Violets are blue,
JavaScript is great,
And so are you!
`;

console.log(poem);

Tagged template literals (advanced):

function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    return result + str + (values[i] ? `**${values[i]}**` : "");
  }, "");
}

const language = "JavaScript";
const result = highlight`I love ${language}!`;
console.log(result); // "I love **JavaScript**!"

String Localization

.toLocaleString(locales, options)

Returns a locale-specific string representation.

const date = new Date();
console.log(date.toLocaleString("en-US"));  // "12/1/2025, 4:23:00 PM"
console.log(date.toLocaleString("de-DE"));  // "1.12.2025, 16:23:00"

Practical Examples

Validate Email Format

function isValidEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

console.log(isValidEmail("user@example.com"));  // true
console.log(isValidEmail("invalid.email"));     // false

Create URL Slug

function createSlug(str) {
  return str
    .toLowerCase()
    .trim()
    .replace(/[^\w\s-]/g, "")
    .replace(/[\s_]+/g, "-")
    .replace(/^-+|-+$/g, "");
}

console.log(createSlug("JavaScript String Manipulation!")); 
// "javascript-string-manipulation"

Count Word Frequency

function countWords(text) {
  return text
    .toLowerCase()
    .split(/\s+/)
    .reduce((counts, word) => {
      counts[word] = (counts[word] || 0) + 1;
      return counts;
    }, {});
}

console.log(countWords("the quick brown fox jumps over the lazy dog"));
// { the: 2, quick: 1, brown: 1, fox: 1, ... }

Best Practices

1. Use template literals (\...``) for string interpolation instead of concatenation.

2. Prefer slice() over substring() — it handles negative indices better.

3. Use includes() for searching instead of indexOf() !== -1.

4. Use startsWith() and endsWith() for clearer intent.

5. Trim user input with .trim() before validation.

6. Use replaceAll() instead of global regex for simple replacements.

7. Chain string methods for readable transformations.

8. Use regular expressions for complex pattern matching.

9. Consider toLocaleString() for user-facing dates and numbers.

10. Immutability: Remember strings are immutable — methods return new strings.