Complete guide on JavaScript string

When we talk about programming, the JavaScript string is a concept that must be understood by all developers. Strings are used to store and manipulate text, and understanding them allows you to create dynamic and interactive web applications.

In JavaScript, it is possible to create strings using single quotes, double quotes or backticks (template literals), allowing great flexibility in text handling. Furthermore, there are several methods and properties that make string manipulation an easy and efficient task for developers.

1. What is a String?

A string in JavaScript is a sequence of characters used to represent text. Strings are immutable, meaning once created, they cannot be altered.

2. How to create a String?

Single quotes (‘)

let greeting = 'Hello, world!';

Double quotes (“)

let greeting = "Hello, world!";

Using backticks (template literals) (“)

let greeting = `Hello, world!`;

3. String Properties

length

Returns the number of characters in a string.

let greeting = 'Hello, world!';
console.log(greeting.length); // Output: 12

4. Basic String Methods

charAt()

Returns the character at a specified position.

let greeting = 'Hello, world!';
console.log(greeting.charAt(0)); // Output: H

concat()

Concatenates (joins) two or more strings.

let part1 = 'Hello';
let part2 = 'world!';
let greeting = part1.concat(', ', part2);
console.log(greeting); // Output: Hello, world!

includes()

Checks if a string contains another string.

let sentence = 'JavaScript is fun';
console.log(sentence.includes('fun')); // Output: true
console.log(sentence.includes('boring')); // Output: false

indexOf()

Returns the index of the first occurrence of a specified value in a string.

let sentence = 'JavaScript is fun';
console.log(sentence.indexOf('is')); // Output: 11

slice()

Extracts a part of the string and returns a new string.

let sentence = 'JavaScript is fun';
let part = sentence.slice(0, 10);
console.log(part); // Output: JavaScript

substring()

Extracts characters between two specified indices.

let sentence = 'JavaScript is fun';
let part = sentence.substring(0, 10);
console.log(part); // Output: JavaScript

toLowerCase()

Converts all characters in the string to lowercase.

let greeting = 'HELLO, WORLD!';
console.log(greeting.toLowerCase()); // Output: hello, world!

toUpperCase()

Converts all characters in the string to uppercase.

let greeting = 'hello, world!';
console.log(greeting.toUpperCase()); // Output: HELLO, WORLD!

5. String Manipulation Methods

replace()

Replaces a part of the string with another.

let sentence = 'JavaScript is fun';
let newSentence = sentence.replace('fun', 'awesome');
console.log(newSentence); // Output: JavaScript is awesome

split()

Splits the string into an array of substrings.

let sentence = 'JavaScript is fun';
let words = sentence.split(' ');
console.log(words); // Output: ["JavaScript", "is", "fun"]

trim()

Removes whitespace from the beginning and end of the string.

let greeting = '   Hello, world!   ';
console.log(greeting.trim()); // Output: Hello, world!

6. Template Literals

Template literals allow embedding expressions inside strings using the syntax ${expression}.

let name = 'John';
let greeting = `Hello, ${name}!`;
console.log(greeting); // Output: Hello, John!

7. Strings and Unicode Characters

Strings in JavaScript are based on Unicode, which means they can represent any character from any language.

let heart = '❤️';
console.log(heart); // Output: ❤️
console.log(heart.length); // Output: 2 (because it is a UTF-16 surrogate pair)

8. Iterating over Strings

Using for

let greeting = 'Hello';
for (let i = 0; i < greeting.length; i++) {
    console.log(greeting[i]);
}
// Output:
// H
// e
// l
// l
// o

Using for…of

let greeting = 'Hello';
for (let char of greeting) {
    console.log(char);
}
// Output:
// H
// e
// l
// l
// o

9. String Comparison

Strings can be compared using comparison operators (==, ===, !=, !==).

let greeting1 = 'Hello';
let greeting2 = 'Hello';
let greeting3 = 'Goodbye';

console.log(greeting1 === greeting2); // Output: true
console.log(greeting1 === greeting3); // Output: false

10. Escaping Characters

To use special characters in strings, you need to escape them with a backslash (\).

let sentence = 'He said: \"JavaScript is awesome!\"';
console.log(sentence); // Output: He said: "JavaScript is awesome!"

This is an overview of strings in JavaScript, covering basic creation and manipulation to more advanced methods.

Understanding the JavaScript string is crucial for any developer who wants to create robust and efficient applications. Proper string manipulation allows you to create advanced functionality and improve the user experience in web applications.