# String Methods

String methods such as trim, toLowerCase, slice, replaceAll, split, join and padStart tidy and reshape text, and each one hands back a new string while the original stays as it was.

Apprentice · JavaScript · Updated November 1, 2026

## After this lesson you can

- Tidy and format text with trim, toLowerCase, toUpperCase, slice, replaceAll and padStart
- Split text into an array with split and join an array back into text with join

## Key takeaways

- A string never changes in place. A string method hands back a new string, so store it in a variable or use it straight away.
- trim takes spaces off both ends, and toLowerCase and toUpperCase change the capital letters.
- slice takes a piece of a string by position, counted from 0, up to but not including the end position.
- replaceAll swaps every match for something else; replace swaps only the first.
- split cuts text into an array at a separator, join glues an array back into text, and padStart pads a string to a fixed width.

People type the way they type. A sign-up form gets `  mARIA  lopez ` with spaces in odd places and the caps lock half on, an email in capital letters, a phone number with dashes. Before that text goes on a name badge, a receipt or a search, a program tidies it. That's a job you will do in almost every app that has a form: a store's checkout, a club's member list, a class project's login page. In this lesson you learn the tools for it.

Meet the **Riverside 5K Fun Run**, a charity race in a city park. Runners sign up online, and the volunteers need clean names for the bibs (the numbered paper squares runners pin on their shirts), a shirt order, and a check-in sheet. Every lesson in this chapter works on its sign-ups, and the names, emails and phone numbers are all made up.

## A string never changes: you get a new one

Think of a printed name badge. If it says *mARIA*, you don't erase letters on it; you print a new badge. JavaScript treats text the same way. A string can't be changed once it exists, so every string method (a function that belongs to a value, called with a dot after it; the `.` is read "dot") hands you back a new string and leaves the original alone:

```javascript
const typed = "  mARIA  ";
const tidy = typed.trim();

console.log(`[${typed}]`);
console.log(`[${tidy}]`);
```

```text
[  mARIA  ]
[mARIA]
```

The square brackets in the output show where each string starts and ends. `typed` still has its spaces; the tidied copy is in `tidy`. Calling `typed.trim();` on a line by itself does the work and throws the result away, which is a very common bug. In your textbook this rule is called **string immutability**: *immutable* means "can't be changed".

## Tidy up: trim, toLowerCase and toUpperCase

You met `trim` and `toUpperCase` in *Strings and Template Literals*. They're the first things to reach for when text comes from a person:

- `trim()` takes spaces (and tabs and line breaks) off both ends, never out of the middle.
- `toLowerCase()` makes every letter small, and `toUpperCase()` makes every letter a capital.

Emails are the classic case: `Maria.Lopez@Example.com` and `maria.lopez@example.com` are the same inbox, so a program compares them in one case:

```javascript
const emailOnForm = "  Maria.Lopez@Example.com ";
const emailOnFile = "maria.lopez@example.com";

const cleaned = emailOnForm.trim().toLowerCase();

console.log(cleaned);
console.log(cleaned === emailOnFile);
```

```text
maria.lopez@example.com
true
```

`emailOnForm.trim().toLowerCase()` is a **chain**: read it left to right. `trim()` hands back a new string, and `toLowerCase()` is called on that new string.

## Take a piece: slice

Every character in a string has a position, called its **index**, counted from 0: in `"jamal"`, `j` is at index 0 and `l` at index 4. `slice(start, end)` hands back the characters from `start` up to, but not including, `end`. Leave out `end` to go to the end of the string, and use a negative number to count from the end:

```javascript
const word = "jamal";

console.log(word.slice(0, 1));
console.log(word.slice(1));
console.log(word.slice(-3));

const capitalized = word.slice(0, 1).toUpperCase() + word.slice(1).toLowerCase();
console.log(capitalized);
```

```text
j
amal
mal
Jamal
```

The last two lines are a recipe you'll use again and again: the first letter as a capital, plus the rest in small letters. It works on `"JAMAL"` and `"jAmAl"` too.

**Try it.** Make a file named `slices.js`, set `const race = "Riverside 5K";`, and print `race.slice(0, 9)`, `race.slice(10)` and `race.slice(-2)`. Before you run it with `node slices.js`, write down what you expect each line to print.

## Swap text: replaceAll

The timing company wants emergency phone numbers written with dashes, like `555-555-0142`, and Jamal typed his with dots. `replaceAll(find, replaceWith)` swaps every match for something else. Its older cousin `replace` swaps only the first one, which surprises people:

```javascript
const phone = "555.555.0142";

console.log(phone.replace(".", "-"));
console.log(phone.replaceAll(".", "-"));

const teamName = "Turtle Power Crew";
const teamPageAddress = teamName.toLowerCase().replaceAll(" ", "-");
console.log(teamPageAddress);
```

```text
555-555.0142
555-555-0142
turtle-power-crew
```

The last example turns a team name into the kind of text you see in a web address, such as `riverside5k.example.com/teams/turtle-power-crew`. Two methods, chained, and the job is done.

## Pieces and back again: split and join

Sometimes you need the words of a string one at a time. `split(separator)` cuts a string wherever the separator appears and hands back an **array** (a numbered list) of the pieces. `join(separator)` is its partner: it glues an array's items into one string, with the separator between each pair:

```javascript
const sizes = "S, M, M, XL";
const sizeList = sizes.split(", ");
console.log(sizeList);
console.log(sizeList.length);

const fullName = ["Priya", "Shah"].join(" ");
console.log(fullName);
console.log(["Maria", "Jamal", "Priya"].join(", "));
```

```text
[ 'S', 'M', 'M', 'XL' ]
4
Priya Shah
Maria, Jamal, Priya
```

Watch out for messy spaces. Split `"  mARIA  lopez "` at every space, and each extra space leaves an empty string `""` in the array. The `filter` method from *map and filter* keeps only the pieces you want:

```javascript
const typed = "  mARIA  lopez ";

console.log(typed.split(" "));
console.log(typed.split(" ").filter((word) => word !== ""));
```

```text
[ '', '', 'mARIA', '', 'lopez', '' ]
[ 'mARIA', 'lopez' ]
```

Split, fix each word, join: that's how a program turns `  mARIA  lopez ` into `Maria Lopez`. You'll put the whole thing together in *Exercise: Fun Run Sign-Ups*.

## Line things up: padStart

Every bib at the Riverside 5K has a four-digit number: runner 7 wears `0007`, runner 58 wears `0058`. `padStart(length, padding)` adds the padding to the front of a string until it's `length` characters long. Its partner `padEnd` adds to the end, which lines up columns on a check-in sheet. They're string methods, so turn a number into a string with `String()` first:

```javascript
const bib = 7;
console.log(String(bib).padStart(4, "0"));
console.log(String(58).padStart(4, "0"));
console.log(String(12345).padStart(4, "0"));

console.log("Maria Lopez".padEnd(14, ".") + "0007");
console.log("Jamal Reed".padEnd(14, ".") + "0012");
```

```text
0007
0058
12345
Maria Lopez...0007
Jamal Reed....0012
```

A string that's already long enough comes back as it is, so `12345` keeps all five digits. Forget the `String()`, and `(7).padStart(4, "0")` stops the program with *TypeError: 7.padStart is not a function*: numbers don't have string methods.

**Try it.** In a file named `bibs.js`, print the bib labels for runners 3, 41 and 250, each as `Bib 0003` and so on. Then try `padStart(6, "*")` and see what changes.

## Check yourself

2 questions to try on the lesson page.

## So what

Text from people is messy, and every form, search box and report you build will clean it. Trim, change the case, slice, swap, split, join and pad, and keep the new string each method hands back.

## Key terms

- [split()](https://www.ask-codey.com/glossary/split-javascript)
- [join()](https://www.ask-codey.com/glossary/join-javascript)
- [slice()](https://www.ask-codey.com/glossary/slice)
- [String Index](https://www.ask-codey.com/glossary/string-index-javascript)
- [Immutability](https://www.ask-codey.com/glossary/immutability)
- padStart()

## Cheat sheets

- [String Methods](https://www.ask-codey.com/cheat-sheets/javascript-text-string-methods-cheat-sheet)

## Related

- [Strings and Template Literals](https://www.ask-codey.com/lessons/javascript-strings-and-template-literals)
- [map and filter](https://www.ask-codey.com/lessons/javascript-array-methods-map-and-filter)

Source: https://www.ask-codey.com/lessons/javascript-text-string-methods