JS String Methods

JavaScript String Methods: A Comprehensive Guide

JavaScript provides a variety of built-in methods to work with strings — allowing you to extract, modify, search, and format text with ease. Below are some of the most commonly used core string methods.

Extracting Substrings

JavaScript slice() Method

The slice() method extracts a part of the string based on the given starting index and ending index and returns a new string.

// Define a string variable
let A = 'Intricate for Devo';

// Use the slice() method to extract a substring
let b = A.slice(0, 9);
let c = A.slice(10, 13);
let d = A.slice(14);
// Output the value of variable
console.log(b); // Output: Intricate
console.log(c); // Output: for
console.log(d); // Output: Devo

JavaScript substring() Method

substring() returns the part of the given string from the start index to the end index. Indexing starts from zero (0).

// Define a string variable
let str = "Mind, Power, Soul";

// Use the substring() method to extract a substring 
let part = str.substring(6, 11);
// Output the value of variable
console.log(part); // Output: Power

JavaScript substr() Method

substr() returns the specified number of characters from the specified index from the given string. It extracts a part of the original string.

// Define a string variable 'str'
let str = "Mind, Power, Soul";

// Use the substr() method to extract a substring 
let part = str.substr(6, 5);
// Output the value of variable
console.log(part); // Output: Power

Modifying and Replacing Strings

JavaScript replace() Method

replace() replaces a part of the given string with another string or a regular expression. The original string will remain unchanged.

// Define a string variable 'str' 
let str = "Mind, Power, Soul";

// Use the replace() method to replace the substring
let part = str.replace("Power", "Space");
// Output the resulting string after replacement
console.log(part); // Output: Mind, Space, Soul

JavaScript replaceAll() Method

replaceAll() returns a new string after replacing all the matches of a string with a specified string or a regular expression. The original string is left unchanged after this operation.

// Define a string variable 'str'
let str = "Mind, Power, Power, Soul";

// Use the replaceAll() method to replace all occurrences
// of "Power" with "Space" in the string 'str'
let part = str.replaceAll("Power", "Space");
// Output the resulting string after replacement
console.log(part); // Output: Mind, Space, Space, Soul

String Case Conversion

JavaScript toUpperCase() Method

toUpperCase() converts all the characters present in the String to upper case and returns a new String with all characters in upper case. This method accepts a single parameter stringVariable string that you want to convert in upper case.

// Define a string variable
let idStr = 'ID ';

// Define another string variable 
let devo = 'stands-for-IntricateDevo';
// Convert the string 'devo' to uppercase using the toUpperCase() method
console.log(devo.toUpperCase()); // Output: STANDS-FOR-INTRICATEDEVO

JavaScript toLowerCase() Method

toLowerCase() converts all the characters present in the string to lowercase and returns a new string with all the characters in lowercase.

// Define a string variable
let idStr = 'ID ';

// Define a string variable 
let devo = 'stands-for-IntricateDevo';
// Convert the string 'devo' to lowercase using the toLowerCase() method
console.log(devo.toLowerCase()); // Output: stands-for-intricatedevo

Concatenating Strings

JavaScript concat() Method

concat() combines the text of two strings and returns a new combined or joined string. To concatenate two strings, we use the concat() method on one object of string and send another object of string as a parameter.

let idStr = 'ID ';
let devo = 'stands for IntricateDevo';

// Accessing concat method on an object of String passing another object as a parameter
console.log(idStr.concat(devo)); // Output: ID stands for IntricateDevo

Trimming Whitespaces

JavaScript trim() Method

trim() is used to remove white spaces from both ends of the given string. This method returns a new string with removed white spaces.

let idStr = 'ID    ';
let devo = 'stands-for-IntricateDevo';

// Storing new object of string with removed white spaces
let newIdStr = idStr.trim();
// Old length vs New length
console.log(idStr.length); // Output: 6
console.log(newIdStr.length); // Output: 2

JavaScript trimStart() Method

trimStart() removes whitespace from the beginning of a string. The value of the original string is not modified.

// Define a string variable 
let str = "  Soul";

// Output the original value of the string 
console.log(str); // Output: "  Soul"
// Use the trimStart() method to remove leading whitespace
let part = str.trimStart();
// Output the resulting string
console.log(part); // Output: "Soul"

JavaScript trimEnd() Method

trimEnd() removes white space from the end of a string. The value of the original string is not modified.

// Define a string variable 
let str = "Soul  ";

// Output the original value of the string
console.log(str); // Output: "Soul  "
// Use the trimEnd() method to remove trailing whitespace
let part = str.trimEnd();
// Output the resulting string
console.log(part); // Output: "Soul"

String Padding

JavaScript padStart() Method

padStart() pads a string with another string until it reaches the given length. The padding is applied from the left end of the string.

// Define a string variable 
let stone = "Soul";

// Use the padStart() method to add padding characters
stone = stone.padStart(9, "Mind ");
// Output the resulting string after padding
console.log(stone); // Output: Mind Soul

JavaScript padEnd() Method

padEnd() pads a string with another string until it reaches the given length. The padding is applied from the right end of the string.

// Define a string variable 
let stone = "Soul";

// Use the padEnd() method to add padding characters
stone = stone.padEnd(10, " Power");
// Output the resulting string after padding
console.log(stone); // Output: Soul Power

Character Extraction and Splitting

JavaScript charAt() Method

charAt() returns the character at the specified index. Strings in JavaScript have zero-based indexing.

let idStr = 'IntricateDevo';
let devo = 'IntricateDevo is the best platform to learn and\nexperience Computer Science.';

// As string index starts from zero, it will return the first character of string
console.log(idStr.charAt(0)); // Output: I
console.log(devo.charAt(5)); // Output: c

JavaScript charCodeAt() Method

charCodeAt() returns a number that represents the Unicode value of the character at the specified index.

let idStr = 'IntricateDevo';
let devo = 'IntricateDevo is the best platform\nto learn and experience\nComputer Science.';

// Return a number indicating Unicode value of character
console.log(idStr.charCodeAt(0)); // Output: 73
console.log(devo.charCodeAt(5)); // Output: 99

JavaScript split() Method

split() splits the string into an array of sub-strings. This method accepts a single parameter character on which you want to split the string.

let idStr = 'ID '
let devo = 'stands-for-IntricateDevo'

// Split string on '-' 
console.log(devo.split('-')); // Output: [ 'stands', 'for', 'IntricateDevo' ]

More JS String Methods

In addition to the core methods covered above, JavaScript's String object comes with a comprehensive set of both instance and static methods for more advanced text manipulation. Below is a list of these methods for your reference.

Instance Methods

These methods are called on an instance of a string (e.g., myString.toUpperCase()).

Static Methods

These methods are called directly on the String object itself (e.g., String.fromCharCode()).