Useful JavaScript String Functions

Introduction: Strings are one of the most fundamental data types in JavaScript, playing a vital role in almost every application. This story not only covers the most useful string functions but also provides practical scenarios where these functions can simplify your work and enhance productivity. By understanding these functions, you’ll be able to handle text-based data seamlessly and make your code more dynamic and user-friendly.

Below is the list of JavaScript string functions that will be explained in this story.

1. toUpperCase

Converts a string to uppercase.

let str = "hello";
console.log(str.toUpperCase()); // Output: "HELLO"

2. toLowerCase

Converts a string to lowercase.

let str = "HELLO";
console.log(str.toLowerCase()); // Output: "hello"

3. trim

Removes whitespace from both ends of a string.

let str = "   hello   ";
console.log(str.trim()); // Output: "hello"

4. charAt

Returns the character at a specified index.

let str = "hello";
console.log(str.charAt(1)); // Output: "e"

5. charCodeAt

Returns the Unicode (ASCII Code) of the character at a specified index.

let str = "hello";
console.log(str.charCodeAt(1)); // Output: 101 (Unicode of "e")

6. indexOf

Returns the index of the first occurrence of a specified substring.

let str = "hello world";
console.log(str.indexOf("world")); // Output: 6

7. lastIndexOf

Returns the index of the last occurrence of a specified substring.

let str = "hello world, hello again";
console.log(str.lastIndexOf("hello")); // Output: 13

8. includes

Checks if a substring is found within the string.

let str = "hello world";
console.log(str.includes("world")); // Output: true

9. slice

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

let str = "hello world";
console.log(str.slice(0, 5)); // Output: "hello"

10. substring

Returns a portion of the string between two indices.

let str = "hello world";
console.log(str.substring(2, 4)); // Output: "ll"

11. substr

Returns a part of the string, starting at a given index for a specified length.

let str = "hello world";
console.log(str.substr(2, 4)); // Output: "llo "

12. replace

Replaces the first occurrence of a specified value with another string.

let str = "hello world, hello again";
console.log(str.replace("hello", "everyone")); 

// Output: "everyone world, hello again"

13. replaceAll

Replaces all occurrences of a specified value with another string.

let str = "hello world, hello again";
console.log(str.replace("hello", "everyone")); 

// Output: "everyone world, everyone again"

14. split

Splits a string into an array of substrings based on a separator.

let str = "apple,banana,orange";
console.log(str.split(",")); // Output: ["apple", "banana", "orange"]

15. concat

Joins two or more strings and returns a new string.

let str1 = "hello";
let str2 = " world";
console.log(str1.concat(str2)); // Output: "hello world"

16. startsWith

Checks if a string starts with a given substring.

let str = "hello world";
console.log(str.startsWith("hello")); // Output: true (case sensitive)

17. endsWith

Checks if a string ends with a given substring.

let str = "hello world";
console.log(str.endsWith("world")); // Output: true (case sensitive)

18. repeat

Returns a string repeated a specified number of times.

let str = "hello ";
console.log(str.repeat(3)); // Output: "hello hello hello "

19. match

Searches for a match against a regular expression and returns array.

let str = "I have 2 apples, 3 oranges, and 1 banana.";
// Use match() to find all the numbers in the string
let result = str.match(/\d+/g); // \d+ matches one or more digits
console.log(result); // Output: ["2", "3", "1"]

// Note: If no matches found then it returns null

20. normalize

Returns the Unicode Normalization Form of the string.

let str1 = "Café";  // Normal string with an accent
let str2 = "Cafe\u0301"; // "Cafe" + combining acute accent (Unicode form)

console.log(str1 === str2); 
// Output: false (they are considered different)

// Normalize both strings to the same form
let normalizedStr1 = str1.normalize("NFC");  // Composed form
let normalizedStr2 = str2.normalize("NFC");  // Composed form

console.log(normalizedStr1 === normalizedStr2); 
// Output: true (now they are considered the same)

Unicode Normalization is the process of converting characters into a consistent form to ensure different representations of the same character are treated as identical

Hope you learned something new today, Thanks for following the blog till the end, do appreciate the blog by clap & leave a comment.