JavaScript String Methods Explained for Beginners

Looking for JavaScript string methods explained for beginners? Here is the short answer: a string is a piece of text, and a string method is a built-in tool that does something with that text, like making it uppercase, cutting out a part, or checking if a word is inside. You call a method by writing a dot and the method name after the string.

In this guide you will learn the most useful string methods one at a time. Every example is small, and you can paste it into your browser console (press F12 and open the Console tab) to try it.

What is a string in JavaScript?

A string is text wrapped in quotes. You can use single quotes, double quotes, or backticks. A variable is a named box that holds a value, and here the value is text.

const name = "Ada Lovelace";
console.log(name);
console.log(name.length);

The first line stores the text in a variable called name. The second line prints it. The third line prints 17, because length is a property that tells you how many characters the string has, including the space. Note that length has no brackets, because it is a value and not a method.

What is a string method?

A method is a function that belongs to a value. A function is a reusable set of instructions. For strings, you write the string, then a dot, then the method name, then brackets. Some methods need extra information inside the brackets, called arguments.

One important rule: strings cannot be changed. Methods never edit the original text. They give you back a new string, so you must save the result in a variable if you want to keep it.

Change the case: toUpperCase and toLowerCase

const word = "Hello";
const loud = word.toUpperCase();
const quiet = word.toLowerCase();
console.log(loud);
console.log(quiet);
console.log(word);

Line 2 makes a new string, HELLO, and saves it in loud. Line 3 makes hello. The last line prints Hello, which proves the original did not change. These methods are great when you compare text, for example an email typed as Sam@Example.com.

Remove extra spaces: trim

const input = "   sam@example.com  ";
const clean = input.trim();
console.log(clean);

trim removes spaces from the start and end of a string. Users often type extra spaces by accident, so trim is very common with forms. The result printed is sam@example.com with no spaces around it.

Find text: includes, indexOf, startsWith

const sentence = "I love learning JavaScript";
console.log(sentence.includes("love"));
console.log(sentence.indexOf("learning"));
console.log(sentence.startsWith("I"));

includes answers yes or no with true or false, so the first log prints true. indexOf returns the position where the word starts. Counting starts at 0, so it prints 7. If the word is missing, indexOf returns -1. startsWith checks the beginning of the text and prints true.

Cut out a part: slice

const text = "JavaScript";
console.log(text.slice(0, 4));
console.log(text.slice(4));
console.log(text.slice(-6));

slice takes a start position and an optional end position. The end is not included. So slice(0, 4) gives Java. With only one number, slice(4) gives everything from position 4 to the end, which is Script. A negative number counts from the end, so slice(-6) also gives Script.

Replace text: replace and replaceAll

const message = "cats and cats and cats";
console.log(message.replace("cats", "dogs"));
console.log(message.replaceAll("cats", "dogs"));

replace changes only the first match, so you get dogs and cats and cats. replaceAll changes every match and gives dogs and dogs and dogs. Each takes the text to find first and the new text second.

Split and join: turning text into a list

const tags = "sql,php,react";
const list = tags.split(",");
console.log(list);
console.log(list.join(" | "));

split cuts a string into pieces at every comma and returns an array, which is an ordered list. The array here is ["sql", "php", "react"]. The join method belongs to arrays, not strings, and does the reverse: it glues the pieces together with a separator. The last line prints sql | php | react.

Build text easily: template literals

const user = "Maya";
const points = 42;
console.log(`Hi ${user}, you have ${points} points.`);

Backticks let you put variables right inside text using ${ }. This is called a template literal. It is much easier to read than joining pieces with plus signs. The output is: Hi Maya, you have 42 points.

Quick reference table

Chaining methods together

const raw = "  HeLLo WoRLD  ";
const result = raw.trim().toLowerCase();
console.log(result);

Because each method returns a new string, you can call another method right away. First trim removes the spaces, then toLowerCase changes the letters. The output is hello world. Read chains from left to right.

Common beginner mistakes

• Forgetting to save the result. Writing name.toUpperCase() alone does nothing useful unless you store or print it.
• Using brackets on length. Write name.length, not name.length().
• Mixing up case. includes("Love") will not find "love", because JavaScript cares about capital letters.
• Expecting counting to start at 1. Positions start at 0.