How to index, split, and manipulate strings in JavaScript

JavaScript treats string primitives and String objects differently. A string primitive is an immutable data type, while String is an object wrapper around a string value.

// String primitive
const stringPrimitive = "A new string.";

// String object
const stringObject = new String("A new string.");

You can use the typeof operator to check the type of each value.

typeof stringPrimitive; // "string"
typeof stringObject;    // "object"

In practice, you will almost always work with string primitives. JavaScript automatically converts primitives to String objects behind the scenes when you access methods or properties, then converts them back to primitives.

Every character in a string corresponds to an index number starting at 0. This includes whitespace characters.

For example, in the string "How are you?", the first character H has index 0, and the last character ? has index 11.

Understanding indexing allows you to access and manipulate individual characters within a string.

You can access characters in a string using bracket notation or built-in methods.

"How are you?"[5];     // "r"
"How are you?".charAt(5); // "r"

To find the index of a character or substring, use indexOf() or lastIndexOf().

"How are you?".indexOf("o");      // 1
"How are you?".lastIndexOf("o");  // 9
"How are you?".indexOf("are");    // 4

The slice() method returns a portion of a string between two index values. The ending index is not included in the result.

"How are you?".slice(8, 11); // "you"
"How are you?".slice(8);     // "you?"

The length property returns the total number of characters in a string.

"How are you?".length; // 12

Remember that length counts characters starting from 1, while string indexes start from 0.

JavaScript provides two simple formatting methods: toUpperCase() and toLowerCase().

"How are you?".toUpperCase(); // "HOW ARE YOU?"
"How are you?".toLowerCase(); // "how are you?"

These methods return new strings and do not modify the original value.

The split() method divides a string into an array based on a delimiter.

const text = "How are you?";
const words = text.split(" ");

console.log(words); // ["How", "are", "you?"]

After splitting, you can access each element using its index.

The trim() method removes whitespace from the beginning and end of a string.

const messy = "   How are you?   ";
const clean = messy.trim();

console.log(clean); // "How are you?"

You can search and replace text using replace().

const text = "How are you?";
const result = text.replace("How", "Where");

console.log(result); // "Where are you?"

Using regular expressions allows you to replace all occurrences and ignore case sensitivity.

const text = "Javascript is great. I love javascript.";
const result = text.replace(/javascript/gi, "JavaScript");

console.log(result);

Strings are one of the most commonly used data types in JavaScript. Understanding how to index, split, and manipulate strings will help you write cleaner and more effective code.

In this tutorial, you learned how string indexing works, how to access characters, and how to use common string methods for formatting and text manipulation.