Strings are one of the most commonly used data types in JavaScript. Whether you're working with user input, displaying messages, or processing text from APIs, strings are everywhere.
To work effectively with text,
JavaScript provides a powerful set of built-in string methods. These methods
help you manipulate, search, and transform text easily.
In this guide, you'll learn the most important string methods every beginner should know, with clear examples.
What
Is a String in JavaScript?
A string is a sequence of characters
enclosed in quotes.
let
name = "JavaScript";
let
message = 'Hello World';
Strings can be written using:
- Double quotes "
"
- Single quotes ' '
- Backticks ` ` (template literals)
1.
length Property
The length property returns the number of characters in a string.
let
text = "JavaScript";
console.log(text.length);
Output:
10
2.
toUpperCase()
Converts a string to uppercase
letters.
let
name = "javascript";
console.log(name.toUpperCase());
Output:
JAVASCRIPT
3.
toLowerCase()
Converts a string to lowercase
letters.
let
name = "JAVASCRIPT";
console.log(name.toLowerCase());
Output:
javascript
4.
trim()
Removes whitespace from both ends of
a string.
let
text = " Hello World ";
console.log(text.trim());
Output:
Hello
World
This is very useful when handling
user input.
5.
slice()
Extracts a portion of a string.
let
text = "JavaScript";
console.log(text.slice(0,
4));
Output:
Java
You can also use negative indexes:
console.log(text.slice(-6));
6.
substring()
Similar to slice(), but does not accept negative indexes.
let
text = "JavaScript";
console.log(text.substring(0,
4));
Output:
Java
7.
replace()
Replaces part of a string with
another value.
let
text = "I like JavaScript";
console.log(text.replace("JavaScript",
"Python"));
Output:
I
like Python
By default, it replaces only the
first match.
8.
replaceAll()
Replaces all occurrences of a value.
let
text = "apple apple apple";
console.log(text.replaceAll("apple",
"orange"));
Output:
orange
orange orange
9.
concat()
Joins two or more strings.
let
str1 = "Hello";
let
str2 = "World";
console.log(str1.concat("
", str2));
Output:
Hello
World
10.
split()
Splits a string into an array.
let
text = "apple,banana,orange";
let
fruits = text.split(",");
console.log(fruits);
Output:
["apple",
"banana", "orange"]
11.
charAt()
Returns the character at a specific
index.
let
text = "JavaScript";
console.log(text.charAt(0));
Output:
J
12.
indexOf()
Finds the position of the first
occurrence of a value.
let
text = "I love JavaScript";
console.log(text.indexOf("JavaScript"));
Output:
7
If not found, it returns -1.
13.
includes()
Checks if a string contains a value.
let
text = "Hello JavaScript";
console.log(text.includes("JavaScript"));
Output:
true
14.
startsWith()
Checks if a string starts with a
specific value.
let
text = "JavaScript is awesome";
console.log(text.startsWith("JavaScript"));
Output:
true
15.
endsWith()
Checks if a string ends with a
specific value.
let
text = "Hello World";
console.log(text.endsWith("World"));
Output:
true
16.
repeat()
Repeats a string a given number of
times.
let
text = "Hi ";
console.log(text.repeat(3));
Output:
Hi
Hi Hi
17.
Template Literals (Bonus)
Template literals make string
creation easier using backticks.
let
name = "John";
console.log(`Hello,
${name}!`);
Output:
Hello,
John!
Common
Mistakes to Avoid
1.
Strings are immutable
You cannot directly change a string:
let
text = "Hello";
text[0]
= "Y"; // does nothing
Correct way:
text
= "Yello";
2.
Confusing slice and substring
- slice()
supports negative indexes
- substring()
does not
Best
Practices
- Use trim() for user input cleanup
- Prefer includes() over indexOf() for readability
- Use template literals for cleaner string formatting
- Use replaceAll() when replacing multiple values
Real-World
Example
Cleaning and formatting user input:
let
input = " hello javascript ";
let
clean = input.trim().toUpperCase();
console.log(clean);
Output:
HELLO
JAVASCRIPT
Conclusion
String methods are essential for
working with text in JavaScript. From simple operations like changing case to
advanced tasks like splitting and replacing text, these methods make string
manipulation easy and powerful.
By mastering these string methods,
you’ll be able to handle user input, process data, and build more dynamic
applications with confidence.