# JavaScript String Methods: slice, includes, replace, and More

Source: https://devdocs10.com/articles/javascript/js-string-methods  
By Murat Bo · Published 2026-06-27 · DevDocs10 (https://devdocs10.com)

JavaScript strings come with a set of built-in methods that help you search, extract, clean, transform, and format text. These methods are used everywhere: validating form input, building user messages, parsing data, and preparing text for display.

> **Quick answer:** String methods are functions on string values such as `slice()`, `includes()`, and `replace()`. They usually return a new string or a simple result like `true` or `false`, and they do not change the original string.

> **Difficulty:** Beginner
>
> **You'll understand this better if you know:** basic JavaScript variables, how strings store text, and the difference between values and methods.

## 1. What Are JavaScript String Methods?

String methods are functions attached to JavaScript string values through `String.prototype`. They let you work with text without writing your own low-level character handling logic.

- `slice()` extracts part of a string.
- `includes()`, `startsWith()`, and `endsWith()` check for text patterns.
- `replace()` and `replaceAll()` transform matching text.
- `trim()` removes whitespace around a string.
- `toUpperCase()` and `toLowerCase()` change letter casing.
- `split()` turns a string into an array.

Most string methods are non-mutating, which means the original string stays unchanged and the method returns a new value instead.

## 2. Why String Methods Matter

Text is one of the most common data types in JavaScript applications. Whether you are handling user names, email addresses, URLs, messages, or file paths, string methods make the work predictable and readable.

They matter because they help you:

- validate and clean user input before using it
- search for keywords or prefixes in text
- extract useful parts of a longer string
- format text for display or comparison
- convert strings into arrays for further processing

Without these methods, simple text handling would require more manual code and would be harder to maintain.

## 3. Basic Syntax

String methods are called directly on a string value. You can use them on string literals or on variables that contain strings.

### Calling a method on a string

Here is the basic pattern:

```javascript
const text = "JavaScript";
const result = text.slice(4);
```

The value before the dot is the string, and the method name after the dot is the operation you want to perform. The arguments inside the parentheses change how the method behaves.

### Common return types

String methods often return one of these:

- a new string, such as from `slice()` or `replace()`
- a boolean, such as from `includes()`, `startsWith()`, or `endsWith()`
- an array, such as from `split()`
- a number, such as from `indexOf()` or `lastIndexOf()`

## 4. Step-by-Step Examples

### Example 1: Extract part of a string with slice()

`slice()` is one of the most useful string methods for pulling out a portion of text. It takes start and end positions, where the end is optional.

```javascript
const fileName = "invoice-2026.pdf";
const baseName = fileName.slice(0, -4);

console.log(baseName); // "invoice-2026"
```

Output (tested with Node 24.21.0):

```text
invoice-2026
```

This example removes the last four characters, which is useful when you know the extension length. Negative indexes count from the end of the string.

### Example 2: Check whether text appears with includes()

`includes()` returns `true` or `false`, so it is perfect for simple presence checks.

```javascript
const message = "Order shipped successfully";

if (message.includes("shipped")) {
  console.log("Status looks good");
}
```

Output (tested with Node 24.21.0):

```text
Status looks good
```

This is a readable way to check for text before taking another action. It is case-sensitive, so `"Shipped"` and `"shipped"` are treated as different strings.

### Example 3: Replace text with replace()

`replace()` swaps the first matching part of a string with another value. It is commonly used for cleanup and formatting.

```javascript
const summary = "Price: $25";
const updatedSummary = summary.replace("$25", "$20");

console.log(updatedSummary); // "Price: $20"
```

Output (tested with Node 24.21.0):

```text
Price: $20
```

The original string stays the same, and the method returns a new string with the replacement applied.

### Example 4: Clean extra spaces with trim()

`trim()` removes whitespace from both ends of a string, which is especially useful for input fields and pasted text.

```javascript
const rawName = "  Alice Johnson  ";
const cleanName = rawName.trim();

console.log(cleanName); // "Alice Johnson"
```

Output (tested with Node 24.21.0):

```text
Alice Johnson
```

This is a common first step before validation or comparison because accidental spaces can cause mismatches.

### Example 5: Convert a sentence into an array with split()

`split()` breaks a string into pieces using a separator. The result is an array, not another string.

```javascript
const tags = "html,css,javascript".split(",");

console.log(tags); // ["html", "css", "javascript"]
```

Output (tested with Node 24.21.0):

```text
[ "html", "css", "javascript" ]
```

This is useful when data arrives as one text value but you need to work with each piece separately.

## 5. Practical Use Cases

String methods show up in many everyday tasks. Common examples include:

- checking whether an email address contains `@`
- removing spaces from user input before saving it
- detecting a file extension such as `.png` or `.json`
- masking sensitive data like part of a phone number or token
- changing a URL slug into readable text
- splitting a comma-separated list into individual items
- formatting labels, titles, and status messages

For example, a login form might use `trim()` before checking a username, while a content editor might use `replaceAll()` to normalize repeated spacing or symbols.

## 6. Common Mistakes

### Mistake 1: Expecting strings to change in place

Strings are immutable in JavaScript. That means methods like `trim()`, `slice()`, and `replace()` return new values instead of modifying the original string.

**Problem:** This code calls a method but never stores the returned string, so the original variable remains unchanged.

```javascript
let name = "  Maya  ";
name.trim();

console.log(name); // "  Maya  "
```

Output (tested with Node 24.21.0):

```text
  Maya  
```

**Fix:** Save the returned value in a variable or reassign it to the same variable.

```javascript
let name = "  Maya  ";
name = name.trim();

console.log(name); // "Maya"
```

Output (tested with Node 24.21.0):

```text
Maya
```

The corrected version works because string methods return a new string that you must keep if you want the result.

### Mistake 2: Calling a string method on a non-string value

It is common to assume that any value can use string methods, but only strings have them. If a value is `undefined`, `null`, or a number, you may get an error such as `TypeError: value.trim is not a function`.

**Problem:** This code tries to call `trim()` on a number, which does not have string methods.

```javascript
const age = 42;
age.trim();
```

**Fix:** Convert the value to a string first when that makes sense.

```javascript
const age = 42;
const textAge = String(age).trim();

console.log(textAge); // "42"
```

Output (tested with Node 24.21.0):

```text
42
```

The fixed version works because `String()` converts the value to a real string before calling the method.

### Mistake 3: Using replace() when you expect every match to change

`replace()` only changes the first matching substring unless you use a regular expression with the global flag or switch to `replaceAll()` for simple text replacements.

**Problem:** This code only changes the first comma, even though the goal is to replace all commas.

```javascript
const csv = "red,green,blue";
const result = csv.replace(",", " | ");

console.log(result); // "red | green,blue"
```

Output (tested with Node 24.21.0):

```text
red | green,blue
```

**Fix:** Use `replaceAll()` for repeated plain-text replacement.

```javascript
const csv = "red,green,blue";
const result = csv.replaceAll(",", " | ");

console.log(result); // "red | green | blue"
```

Output (tested with Node 24.21.0):

```text
red | green | blue
```

The corrected version works because `replaceAll()` replaces every matching substring, not just the first one.

## 7. Best Practices

### Use includes() for simple presence checks

If you only need to know whether text exists, `includes()` is clearer than manually comparing positions.

```javascript
const email = "user@example.com";

if (email.includes("@")) {
  console.log("Looks like an email address");
}
```

Output (tested with Node 24.21.0):

```text
Looks like an email address
```

This is easier to read than comparing `indexOf()` against `-1` when the task is just containment.

### Trim before validating or comparing user input

Users often enter spaces accidentally, especially in forms. Trimming first helps avoid surprising failures.

```javascript
const input = "  admin  ";
const normalized = input.trim().toLowerCase();

console.log(normalized); // "admin"
```

Output (tested with Node 24.21.0):

```text
admin
```

Normalizing before comparison makes your checks more reliable.

### Choose replaceAll() when you need every occurrence changed

Use `replace()` for one change and `replaceAll()` for repeated literal substitutions.

```javascript
const title = "cat cat cat";
const updated = title.replaceAll("cat", "dog");

console.log(updated); // "dog dog dog"
```

Output (tested with Node 24.21.0):

```text
dog dog dog
```

This avoids the common mistake of thinking `replace()` updates every match automatically.

## 8. Limitations and Edge Cases

- `includes()`, `startsWith()`, and `endsWith()` are case-sensitive.
- `slice()` counts positions by UTF-16 code units, so some emoji and complex characters can behave unexpectedly when sliced in the middle.
- `replace()` accepts plain strings or regular expressions, but the behavior changes depending on which one you pass.
- `trim()` removes standard whitespace at the ends, but it does not remove spaces in the middle of a string.
- `split()` can return unexpected empty strings if the separator appears at the start, end, or twice in a row.
- Methods do not mutate the original string, so forgetting to store the result can make code look like it is "not working."

> **Note:** If you need case-insensitive checks, convert both values to the same case first, or use a regular expression when appropriate.

## 9. Practical Mini Project

Let’s build a tiny text cleaner for a newsletter signup form. It trims spaces, checks for a valid-looking domain, and replaces repeated spaces inside the display name.

```javascript
function formatSubscriber(name, email) {
  const cleanName = name.trim().replaceAll("  ", " ");
  const cleanEmail = email.trim().toLowerCase();
  const isEmailLike = cleanEmail.includes("@") && cleanEmail.includes(".");

  return {
    name: cleanName,
    email: cleanEmail,
    valid: isEmailLike
  };
}

const subscriber = formatSubscriber("  Ava   Stone  ", "  AVA@example.com  ");
console.log(subscriber);
```

Output (tested with Node 24.21.0):

```text
{ name: "Ava  Stone", email: "ava@example.com", valid: true }
```

This example uses several string methods together to normalize text before a simple validity check. It is not a full email validator, but it shows how string methods are often combined in real applications.

## 10. Key Points

- String methods help you search, extract, clean, and transform text.
- Most string methods return a new value instead of changing the original string.
- `slice()` extracts parts of a string, while `includes()` checks for text.
- `replace()` changes text, but `replaceAll()` is better for every occurrence.
- `trim()` is a common first step when handling user input.
- `split()` turns string data into arrays for easier processing.

## 11. Practice Exercise

- Write a function that accepts a product code like `" sku-1024 "`.
- Trim the value, convert it to uppercase, and check whether it includes a hyphen.
- Remove the `sku-` prefix if it exists.
- Return the cleaned code and a boolean that says whether the original input looked valid.

**Expected output:** A normalized uppercase code such as `"1024"` and a validation result such as `true`.

**Hint:** Use `trim()`, `toUpperCase()`, `includes()`, and `replace()` or `slice()`.

```javascript
function cleanProductCode(input) {
  const trimmed = input.trim();
  const valid = trimmed.includes("-");
  const upper = trimmed.toUpperCase();
  const cleaned = upper.replace("SKU-", "");

  return {
    cleaned,
    valid
  };
}

const result = cleanProductCode("  sku-1024  ");
console.log(result); // { cleaned: "1024", valid: true }
```

Output (tested with Node 24.21.0):

```text
{ cleaned: "1024", valid: true }
```

## 12. Final Summary

JavaScript string methods are the standard tools for working with text. They let you extract pieces with `slice()`, check content with `includes()`, clean input with `trim()`, transform text with `replace()`, and split data into parts with `split()`.

Because strings are immutable, these methods return new values instead of editing the original string. That design makes string handling predictable, but it also means you need to save the result when you want to use the transformed text.

Once you are comfortable with these methods, the next step is to learn when to use regular expressions with string operations, especially for advanced searching and replacement tasks.