JS String Methods

Think of a text editor's toolbar, buttons for uppercase, trimming extra spaces, finding and replacing words, each one does one specific, well-defined job to transform your text. JavaScript strings come with a whole toolbar of built-in methods just like that, letting you change case, cut out parts of a string, search for specific words, or split a sentence into individual pieces, all without writing that logic yourself. These methods are used constantly in real applications, from formatting a tutorial title on cookiescursor.com to validating a visitor's typed email address.

In this page:

Changing Case
trim
slice and substring
replace and replaceAll
split, includes, startsWith, and endsWith

Syntax

javascript

string.length;
string.slice(start, end);
string.replace(old, new);
string.split(separator);
string.toUpperCase();

Changing Case

toUpperCase() converts every letter in a string to uppercase, and toLowerCase() converts every letter to lowercase, both returning a brand new string rather than changing the original.

Note: Converting both sides of a comparison to the same case, with toLowerCase(), is a common trick for case-insensitive matching.

Warning: Since strings are immutable, calling toUpperCase() without storing its result does nothing useful, you must capture the returned value.

उदाहरण: Changing Case

javascript

// Declare the constant `text`, set to "Hello World"
// Declare the constant `text`, set to "Hello World"
const text = "Hello World";
// Print `text.toUpperCase()` to the console
// Print `text.toUpperCase()` to the console
console.log(text.toUpperCase());
// Print `text.toLowerCase()` to the console
// Print `text.toLowerCase()` to the console
console.log(text.toLowerCase());

trim

trim() removes whitespace from the beginning and end of a string, which is especially useful for cleaning up user-typed input that might contain accidental leading or trailing spaces.

Note: Always trim user input from a form field before validating it, extra spaces are easy for a visitor to type without noticing.

Warning: trim() only removes whitespace from the edges of a string, spaces in the middle of the text are left untouched.

उदाहरण: trim

javascript

const input = "   hello   ";
console.log(`"${input.trim()}"`);

slice and substring

slice(start, end) and substring(start, end) both extract a portion of a string based on index positions, slice supports negative indexes counting from the end, while substring treats negative values as zero.

Note: For most cases, slice() is the more flexible and predictable choice, especially when working with positions relative to the end of a string.

Warning: Both methods extract up to, but not including, the end index, forgetting this off-by-one detail is a common source of bugs.

उदाहरण: slice and substring

javascript

// Declare the constant `text`, set to "JavaScript"
// Declare the constant `text`, set to "JavaScript"
const text = "JavaScript";
// Print `text.slice(0, 4)` to the console
// Print `text.slice(0, 4)` to the console
console.log(text.slice(0, 4));
// Print `text.slice(-6)` to the console
// Print `text.slice(-6)` to the console
console.log(text.slice(-6));
// Print `text.substring(0, 4)` to the console
// Print `text.substring(0, 4)` to the console
console.log(text.substring(0, 4));

replace and replaceAll

replace() swaps the first match of a specified text or pattern with new text, while replaceAll() swaps every matching occurrence throughout the entire string.

Note: If you only want to replace one specific occurrence deliberately, replace() is correct, otherwise reach for replaceAll() to be thorough.

Warning: Using replace() when you actually needed every occurrence changed is a common bug, since only the first match gets updated.

उदाहरण: replace and replaceAll

javascript

// Declare the constant `text`, set to "cat cat cat"
// Declare the constant `text`, set to "cat cat cat"
const text = "cat cat cat";
// Print `text.replace("cat", "dog")` to the console
// Print `text.replace("cat", "dog")` to the console
console.log(text.replace("cat", "dog"));
// Print `text.replaceAll("cat", "dog")` to the console
// Print `text.replaceAll("cat", "dog")` to the console
console.log(text.replaceAll("cat", "dog"));

split, includes, startsWith, and endsWith

split() breaks a string into an array of pieces based on a separator, while includes(), startsWith(), and endsWith() each check for the presence of specific text at any position, the start, or the end of a string.

Note: split() is especially handy for turning a comma-separated list, like tags or categories, into a usable array.

Warning: includes(), startsWith(), and endsWith() are all case sensitive by default, normalize casing first if that matters for your check.

उदाहरण: split, includes, startsWith, and endsWith

javascript

// Declare the constant `tags`, set to "html,css,js"
// Declare the constant `tags`, set to "html,css,js"
const tags = "html,css,js";
// Print `tags.split(",")` to the console
// Print `tags.split(",")` to the console
console.log(tags.split(","));
// Print `tags.includes("css")` to the console
// Print `tags.includes("css")` to the console
console.log(tags.includes("css"));
// Print `tags.startsWith("html")` to the console
// Print `tags.startsWith("html")` to the console
console.log(tags.startsWith("html"));
// Print `tags.endsWith("js")` to the console
// Print `tags.endsWith("js")` to the console
console.log(tags.endsWith("js"));

Live Example

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

← Previous Lesson JS Strings Next Lesson → JS Arrays

JS String Methods

Changing Case

trim

slice and substring

replace and replaceAll

split, includes, startsWith, and endsWith

Chapter Quiz — Complete all 6 topics to unlock

Login to run this code