JavaScript provides a rich set of string methods that help you manipulate and analyze text. Whether you’re cleaning user input, formatting data, or building dynamic content, understanding these methods is essential.
This tutorial covers the most commonly used JavaScript string methods with practical examples.
1. What Are String Methods?
String methods are built-in functions that you can call on strings to perform actions like changing case, finding substrings, replacing characters, and more.
Let’s explore some of the most useful string methods in JavaScript.
2. length
Although not a method (it’s a property), length is used to find the number of characters in a string.
javascriptCopyEditlet message = "JavaScript";
console.log(message.length); // 10
3. toUpperCase() and toLowerCase()
These methods convert strings to uppercase or lowercase.
javascriptCopyEditlet city = "London";
console.log(city.toUpperCase()); // "LONDON"
console.log(city.toLowerCase()); // "london"
4. trim()
Removes whitespace from both ends of a string.
javascriptCopyEditlet input = " hello world ";
console.log(input.trim()); // "hello world"
Variants:
trimStart()– trims the beginningtrimEnd()– trims the end
5. slice(start, end)
Extracts a part of a string based on index positions.
javascriptCopyEditlet text = "JavaScript";
console.log(text.slice(0, 4)); // "Java"
console.log(text.slice(-6)); // "Script"
6. substring(start, end)
Similar to slice() but doesn’t accept negative values.
javascriptCopyEditlet str = "Programming";
console.log(str.substring(0, 6)); // "Progra"
7. substr(start, length)
Returns a substring starting at a position for a specified length. (Deprecated in modern JavaScript)
javascriptCopyEditconsole.log(str.substr(0, 4)); // "Prog"
Prefer slice() or substring() instead.
8. replace() and replaceAll()
Replaces parts of a string.
javascriptCopyEditlet quote = "I love cats";
console.log(quote.replace("cats", "dogs")); // "I love dogs"
let sentence = "cats are cats";
console.log(sentence.replaceAll("cats", "dogs")); // "dogs are dogs"
You can also use regular expressions:
javascriptCopyEditconsole.log(sentence.replace(/cats/g, "dogs"));
9. includes()
Checks if a string contains a specific substring.
javascriptCopyEditlet email = "example@gmail.com";
console.log(email.includes("@")); // true
10. startsWith() and endsWith()
Checks if a string starts or ends with a particular substring.
javascriptCopyEditconsole.log(email.startsWith("example")); // true
console.log(email.endsWith(".com")); // true
11. indexOf() and lastIndexOf()
Finds the position of a substring.
javascriptCopyEditlet message = "Hello world!";
console.log(message.indexOf("o")); // 4
console.log(message.lastIndexOf("o")); // 7
Returns -1 if not found.
12. split(separator)
Splits a string into an array of substrings.
javascriptCopyEditlet fruits = "apple,banana,orange";
console.log(fruits.split(",")); // ["apple", "banana", "orange"]
13. concat()
Joins two or more strings.
javascriptCopyEditlet first = "Hello";
let second = "World";
console.log(first.concat(" ", second)); // "Hello World"
You can also use + or template literals:
javascriptCopyEditconsole.log(`${first} ${second}`);
14. charAt(index)
Returns the character at the given position.
javascriptCopyEditlet word = "JavaScript";
console.log(word.charAt(0)); // "J"
Alternative: word[0]
15. repeat(n)
Repeats the string n times.
javascriptCopyEditconsole.log("ha".repeat(3)); // "hahaha"
16. match()
Searches a string for a match using a regular expression.
javascriptCopyEditlet text = "The rain in Spain";
console.log(text.match(/ain/g)); // ["ain", "ain"]
17. padStart() and padEnd()
Pads the string to a certain length.
javascriptCopyEditlet code = "7";
console.log(code.padStart(3, "0")); // "007"
console.log(code.padEnd(3, "0")); // "700"
Summary Table
| Method | Description |
|---|---|
toUpperCase() | Convert to uppercase |
trim() | Remove whitespace |
slice() | Extract substring |
replace() | Replace text |
includes() | Check if string contains text |
split() | Split string into array |
charAt() | Get character at index |
repeat() | Repeat the string |
padStart() | Pad beginning of string |
Conclusion
Mastering string methods in JavaScript will allow you to manipulate text efficiently. These tools are vital for:
- Formatting input
- Parsing data
- Creating dynamic content
- Building interactive applications
Practice using these methods in real-world examples, such as form validation, search features, and display formatting.