Introduction to JavaScript Strings

In JavaScript, strings are one of the most commonly used data types. A string is a sequence of characters enclosed in single quotes (‘ ‘), double quotes (” “), or backticks (“) in template literals. JavaScript provides numerous built-in methods to manipulate and modify strings efficiently.

Whether you are concatenating, searching, replacing, splitting, or formatting text, JavaScript has powerful string methods to make your work easier. In this guide, we will explore JavaScript strings methods in detail, along with real-world examples.

JavaScript Destructuring: Arrays and Objects

1. Creating Strings in JavaScript

There are multiple ways to declare a string in JavaScript:

1.1 Using Single or Double Quotes

let singleQuoteString = 'Hello, World!';
let doubleQuoteString = "Hello, JavaScript!";
console.log(singleQuoteString);
console.log(doubleQuoteString);

Both single (' ') and double (" ") quotes work the same way in JavaScript.

1.2 Using Template Literals (Backticks “)

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

let name = "Alice";
let message = `Hello, ${name}! Welcome to JavaScript.`;
console.log(message);

Template literals improve readability and allow multi-line strings without concatenation.

2. Common JavaScript String Methods

JavaScript provides several built-in methods for string manipulation. Let’s explore them with examples.

2.1 Finding the Length of a String

The .length property returns the number of characters in a string.

let text = "JavaScript";
console.log(text.length); // 10

2.2 Changing Case (Uppercase & Lowercase)

You can convert a string to uppercase or lowercase using .toUpperCase() and .toLowerCase().

let sentence = "Hello JavaScript";
console.log(sentence.toUpperCase()); // HELLO JAVASCRIPT
console.log(sentence.toLowerCase()); // hello javascript

2.3 Extracting Parts of a String

There are multiple methods to extract parts of a string.

2.3.1 `slice(start, end)`

Extracts a portion of a string between the start and end indexes.

let text = "JavaScript is fun";
console.log(text.slice(0, 10)); // JavaScript
console.log(text.slice(-3)); // fun

2.3.2 `substring(start, end)`

Similar to slice(), but does not support negative indexes.

let text = "JavaScript";
console.log(text.substring(0, 4)); // Java

2.3.3 `substr(start, length)`

Extracts a portion of a string based on starting position and length.

let text = "Programming";
console.log(text.substr(0, 5)); // Progr
console.log(text.substr(3, 4)); // gram

2.4 Finding a Substring Within a String

To find a word or character inside a string, use these methods:

2.4.1 `indexOf(substring)`

Finds the first occurrence of a substring. Returns -1 if not found.

let text = "JavaScript is amazing";
console.log(text.indexOf("is")); // 11
console.log(text.indexOf("Python")); // -1 (not found)

2.4.2 `lastIndexOf(substring)`

Finds the last occurrence of a substring.

let text = "Hello JavaScript, JavaScript is fun!";
console.log(text.lastIndexOf("JavaScript")); // 19

2.4.3 `includes(substring)`

Returns true if the substring exists, otherwise false.

let text = "Learning JavaScript";
console.log(text.includes("JavaScript")); // true
console.log(text.includes("Python")); // false

2.5 Replacing Part of a String

The .replace() method replaces a substring with a new string.

let sentence = "I love Python";
let newSentence = sentence.replace("Python", "JavaScript");
console.log(newSentence); // I love JavaScript

Note: replace() only replaces the first occurrence. To replace all occurrences, use a regular expression (/pattern/g):

let text = "JavaScript is cool, JavaScript is powerful!";
let updatedText = text.replace(/JavaScript/g, "JS");
console.log(updatedText); // JS is cool, JS is powerful!

2.6 Splitting a String into an Array

The .split() method divides a string into an array based on a separator.

let names = "Alice, Bob, Charlie";
let nameArray = names.split(", "); 

console.log(nameArray); // ["Alice", "Bob", "Charlie"]

2.7 Removing Whitespace from a String

The .trim() method removes whitespace from both ends of a string.

let text = "   JavaScript    ";
console.log(text.trim()); // "JavaScript"

Variants:

.trimStart() – Removes whitespace from the start.
.trimEnd() – Removes whitespace from the end.

2.8 Repeating a String

The .repeat() method repeats a string multiple times.

let word = "Hello ";
console.log(word.repeat(3)); // Hello Hello Hello

2.9 Extracting Characters from a String

2.9.1 `charAt(index)`

Returns the character at a specific index.

let text = "JavaScript";
console.log(text.charAt(3)); // a

2.9.2 `charCodeAt(index)`

Returns the Unicode value of a character at a specific index.

console.log("A".charCodeAt(0)); // 65

3. Advanced String Manipulations

3.1 Checking if a String Starts or Ends with a Specific Word

.startsWith() – Checks if a string starts with a given value.
.endsWith() – Checks if a string ends with a given value.

let text = "JavaScript is powerful";

console.log(text.startsWith("JavaScript")); // true
console.log(text.endsWith("powerful")); // true

3.2 Template Literals for String Interpolation

Template literals allow embedding expressions inside strings.

let name = "Alice";
let age = 25;

let message = `My name is ${name} and I am ${age} years old.`;
console.log(message);

3.3 Escaping Special Characters in Strings

Use \ (backslash) to escape special characters.

let sentence = "He said, \"JavaScript is amazing!\"";
console.log(sentence);

4. Real-World Examples of String Manipulation

4.1 Capitalizing the First Letter of Each Word

function capitalizeWords(str) {
    return str.split(" ")
              .map(word => word.charAt(0).toUpperCase() + word.slice(1))
              .join(" ");
}

console.log(capitalizeWords("javascript is fun")); // JavaScript Is Fun

4.2 Checking if a String is a Palindrome

function isPalindrome(str) {
    let cleanStr = str.toLowerCase().replace(/[^a-z0-9]/g, '');
    return cleanStr === cleanStr.split("").reverse().join("");
}

console.log(isPalindrome("racecar")); // true
console.log(isPalindrome("hello")); // false

Conclusion

JavaScript provides powerful methods for string manipulation. From basic operations like changing case and extracting substrings to advanced manipulations like template literals and regex replacements, mastering these methods will make you a better JavaScript developer.

By practicing these methods, you can write cleaner, more efficient, and more dynamic JavaScript code. 🚀