JavaScript String Functions
Strings are text values like names, messages, or URLs. JavaScript provides many built-in methods that let you search, slice, split, transform, and combine strings easily.
What is a String?
A string is a sequence of characters surrounded by quotes — single (' '), double (" "), or backticks (` `) for template literals. Strings are immutable: methods return a new string instead of modifying the original.
Why Strings Matter
User Text
Names, messages, comments — everything users type.
URLs
Build, parse and modify links.
HTML Content
Inject text into the page using innerHTML.
Validation
Check email format, password strength.
Localization
Translate or format text per language.
Search
Find, replace and highlight text.
Basic Features
- Strings are immutable — any method returns a new string.
- Index starts at 0. Access with
str[0]orstr.charAt(0). - Template literals
`Hello ${name}`allow embedding variables. - Use
+or template literals to concatenate strings.
Common String Methods
| Method | Description | Example → Output |
|---|---|---|
| length | Number of characters | "hello".length → 5 |
| toUpperCase() | All uppercase | "abc" → "ABC" |
| toLowerCase() | All lowercase | "ABC" → "abc" |
| charAt(i) | Char at index | "hi".charAt(1) → "i" |
| indexOf() | Position of substring | "hello".indexOf("l") → 2 |
| slice(a,b) | Extract part | "hello".slice(1,4) → "ell" |
| substring(a,b) | Like slice (no negatives) | "hello".substring(0,3) → "hel" |
| replace() | Replace match | "hi all".replace("all","world") |
| split() | Split into array | "a,b,c".split(",") |
| trim() | Remove spaces | " hi ".trim() → "hi" |
| includes() | Contains check | "hello".includes("ell") → true |
| concat() | Join strings | "hi".concat(" world") |
| repeat(n) | Repeat string | "ab".repeat(3) → "ababab" |
String Functions in JavaScript
Strings in JavaScript are used to store and manipulate text. JavaScript provides many built-in string functions that help developers search, format, extract, replace, and transform text easily.
Definition of String
A string is a sequence of characters used to represent textual data. Strings are immutable which means once created they cannot be changed directly.
Creating Strings
let singleQuote = 'Hello World'; let doubleQuote = "Hello World"; let templateLiteral = `Hello World`;
Important String Methods
| Method | Description |
|---|---|
| length | Returns string length. |
| toUpperCase() | Converts into uppercase. |
| toLowerCase() | Converts into lowercase. |
| trim() | Removes extra spaces. |
| replace() | Replaces text. |
| slice() | Extracts part of string. |
| split() | Converts string into array. |
| includes() | Checks substring existence. |
Your First String Program
<script> let s = "PBA Institute"; document.write( "Length = " + s.length + "<br>" ); document.write( "Upper = " + s.toUpperCase() ); </script>
Upper = PBA INSTITUTE
Example 1 : length()
<html>
<body>
<button onclick="myFunction()">
Try it
</button>
<p id="demo"></p>
<script>
function myFunction(){
var str =
"PBA INSTITUTE";
var n =
str.length;
document
.getElementById("demo")
.innerHTML = n;
}
</script>
</body>
</html>
Example 2 : toUpperCase()
<html>
<body>
<button onclick="myFunction()">
CLICK
</button>
<p id="demo">
Hello World!
</p>
<script>
function myFunction(){
var text =
document
.getElementById("demo")
.innerHTML;
document
.getElementById("demo")
.innerHTML =
text.toUpperCase();
}
</script>
</body>
</html>
Example 3 : Slice & Substring
<script> let str = "JavaScript Programming"; document.write( str.slice(0,10) + "<br>" ); document.write( str.substring(11) ); </script>
Programming
Example 4 : trim()
<html>
<body>
<button onclick="myFunction()">
CLICK
</button>
<script>
function myFunction(){
var str =
" PBA INSTITUTE ";
document.write(
str.trim()
);
}
</script>
</body>
</html>
Example 5 : replace()
<html>
<body>
<p id="p">
BEST PROGRAMMING
INSTITUTE : XYZ
</p>
<button onclick="myFunction()">
Try it
</button>
<script>
function myFunction(){
var str =
document
.getElementById("p")
.innerHTML;
var res =
str.replace(
"XYZ",
"PBA INSTITUTE"
);
document
.getElementById("p")
.innerHTML = res;
}
</script>
</body>
</html>
Example 6 : Split & Join
<script>
let csv =
"apple,banana,mango";
let arr =
csv.split(",");
document.write(
arr[1]
+ "<br>"
);
document.write(
arr.join(" | ")
);
</script>
apple | banana | mango
Example 7 : Reverse String
<script>
let str = "HELLO";
let rev =
str.split("")
.reverse()
.join("");
document.write(rev);
</script>
Important Notes
- Strings are immutable.
- Template literals use backticks.
- trim() removes outer spaces only.
- String comparison is case-sensitive.
Benefits of String Functions
- Improves readability.
- Saves development time.
- Easier text manipulation.
- Better cross-browser compatibility.
- Makes applications scalable.
Real-Life Use Cases
Email Validation
Validate email format.
Search Bars
Build live searching systems.
CSV Parsing
Read spreadsheet data easily.
Frequently Asked Questions
| Question | Answer |
|---|---|
| Why can't strings be changed directly? | Strings are immutable. |
| Difference between slice() and substring() ? | slice supports negative values. |
| What are template literals? | Backtick strings with variables. |
Conclusion
String functions in JavaScript provide powerful tools for manipulating and formatting text efficiently in modern web applications.
JavaScript All Chapters
Continue Learning
Previous
Go to Date Time Function Chapter