JavaScript Strings and String Methods Tutorial

What are Strings?

A string refers to a series of characters enclosed by either single (' ') or double (" ") quotes.
In JavaScript, both single and double quotes are treated equivalently, you can use either of them.

let singleQuoted = 'This is a string.';
let doubleQuoted = "This is another string.";

Creating Strings in JavaScript

Strings can be made with either single or double quotes.
You can also use backticks ( ) to create template strings, which allow for string interpolation.

let singleQuoted = 'This is a string.';
let doubleQuoted = "This is another string.";

let templateString = `This String created with Back Tics`

String Concatenation

You can combine strings by using the + sign or by using template literals.

let firstName = 'Jack';
let lastName = 'Salvatore';

// Using the + operator
let fullName = firstName + ' ' + lastName;
console.log(fullName); // Output: Jack Salvatore

let userName = "Jack";
let userAge = 19
let userDescription = `The ${userName} is ${userAge} years old.`;

console.log(userDescription) // Output: The Jack is 19 years old.

String Manipulation

JavaScript has many methods for manipulating strings. You can trim, replace, and modify strings as needed.
Similar to arrays, strings also behave like an array. This means you can access specific characters, much like you would with an array. However, it's important to note that unlike arrays, you can't directly change the characters in a string.

let text = '   Trim me!   ';
let trimmed = text.trim(); // Removes leading and trailing spaces

let replaced = text.replace('me', 'you'); // Replaces 'me' with 'you'

console.log(trimmed); // Output: 'Trim me!'
console.log(replaced); // Output: '   Trim you!   '

let name = "Jack";
let nameFirstCharacter = name[0];
console.log(nameFirstCharacter); // Output: J

String Interpolation

Template literals (`${}`) for string interpolation. You can combine expressions within ${} inside template literals.

let name = 'Alice';
let age = 19;
let greeting = `Hello, ${name}!`;
console.log(greeting); // Output: Hello, Alice!
console.log(`${name}` is ${age} years old`) // Output: Alice is 19 years old.

String Comparison

You can compare strings using comparison operators (==, ===, <, >, etc.) or string methods like localeCompare.

let string1 = 'apple';
let string2 = 'banana';

let checkStrings = string1 === string2;
console.log(checkStrings); //Output: false

console.log(string1.localeCompare(string2)); // Output: -1 (string1 comes before string2 in lexicographic order)

String Methods

String methods in JavaScript allow you to perform various operations on strings, such as extracting characters, searching for patterns, and converting strings to different cases.
charAt(): Returns the character at the specified index in a string.
indexOf(): Returns the index of the first occurrence of a substring in a string, or -1 if the substring is not found.
lastIndexOf(): Returns the index of the last occurrence of a substring in a string, or -1 if the substring is not found.
slice(): Extracts a substring from a string, starting at a specified index and ending at another specified index.
substring(): Extracts a substring from a string, starting at a specified index and ending at the end of the string.
substr(): Extracts a substring from a string, starting at a specified index and ending at a specified length.
toLowerCase(): Converts a string to lowercase.
toUpperCase(): Converts a string to uppercase.
trim(): Removes whitespace from the beginning and end of a string.

const str = "This is a string.";

// charAt()
console.log(str.charAt(0)); // T

// indexOf()
console.log(str.indexOf("is")); // 2

// lastIndexOf()
console.log(str.lastIndexOf("is")); // 10

// slice()
console.log(str.slice(2, 5)); // is a

// substring()
console.log(str.substring(2)); // is a string.

// substr()
console.log(str.substr(2, 5)); // is a

// toLowerCase()
console.log(str.toLowerCase()); // this is a string.

// toUpperCase()
console.log(str.toUpperCase()); // THIS IS A STRING.

// trim()
console.log(str.trim()); // This is a string.

Previous Next