1. javascript
  2. /basics
  3. /string-methods

JavaScript String Methods

Introduction

A string in JavaScript is a series of characters, represented in the Unicode character set encoded in UTF-16 format. Whether you're working with words, numbers, or special characters, strings are the bare essentials of many operations in JavaScript.

Syntax and Definition

In JavaScript, strings can be defined using single quotes ('') or double quotes (""). We should also mention that it's also possible to use backticks (``), which we'll come across later in the examples using Template Literals.

let myString = 'Hello, World!';
let myOtherString = "I love JavaScript!";

Strings are immutable, meaning that once a string is created, it cannot be changed.

Instead, if you need to modify a string, you must create a new string that represents the desired modification. That's where string methods come in.

To have an up-to-date grasp of strings, we suggest you read our guide for Template Literals in ES6 JavaScript.

String Methods

JavaScript provides several built-in methods for working with strings, which can be used to perform a variety of operations. We'll cover some of the most commonly used methods.

Trimming Strings

Trimming strings removes any leading or trailing whitespace.

let myString = '   Web Reference is live!   ';
console.log(myString.trim());  // Output: 'Web Reference is live!'

let myString = '   Learn JavaScript!   ';
console.log(myString.trimStart());  // Output: 'Learn JavaScript!   '
console.log(myString.trimEnd());  // Output: '   Learn JavaScript!'

Interpolation and Concatenation

Interpolation and concatenation are two methods for combining strings in. Interpolation involves embedding expressions within a string, while concatenation simply involves combining two or more strings into a single one.

let firstName = 'Brendan';
let lastName = 'Eich';
console.log(`Hello, my name is ${firstName} ${lastName}.`);  // Output: 'Hello, my name is Brendan Eich.'

let firstString = 'Tim Berners-Lee,';
let secondString = ' I thank thee!';
console.log(firstString + secondString);  // Output: 'Tim Berners-Lee, I thank thee!'

Replacing and Extracting Strings

The .replace() method in JavaScript can be used to replace all occurrences of a specified string within another string. The .slice() method, on the other hand, extracts a portion of a string, and returns it as a new one. The characters are indexed starting from zero.

let myString = 'Oh, coding is hard.';
console.log(myString.replace('hard', 'challenging')); 
// Output: 'Oh, coding is challenging.'

let myString = 'Separate wheat from chaff';
console.log(myString.slice(0, 14));  // Output: 'Separate wheat'

Searching, Indexing & Locating

The .indexOf() and .lastIndexOf() methods search for a specified string within another string, and return the index of the first occurrence. Additionally, the .charAt() method, returns a character at a specified index within a string.

let myString = 'String cheese';
console.log(myString.indexOf('cheese'));  // Output: 7
console.log(myString.lastIndexOf('e'));  // Output: 12

let myString = 'We won!';
console.log(myString.charAt(0));  // Output: 'W'

Changing Case

With the .toLowerCase() and .toUpperCase() methods, we change the case of a string. The .toLowerCase() method will convert all characters in a string to lowercase, while the .toUpperCase() method will convert all characters to uppercase.

let myString = 'Shapeshifting Shenanigans';
console.log(myString.toLowerCase());  // Output: 'shapeshifting shenanigans'
console.log(myString.toUpperCase());  // Output: 'SHAPESHIFTING SHENANIGANS'

Useful Resources

Check out this alternative method to .indexOf() for locating a substring in the following community discussion.