codingstuff.io
ExploreTutorialsProblemsCS Subjects
Get Started
ExploreTutorialsProblemsCS Subjects
Get Started
codingstuff.io

Master the art of building software through interactive tutorials, real-world problems, and guided projects.

Pune, Maharashtra, India

codingstuffmail@gmail.com

Product

  • Explore
  • Tutorials
  • Problems
  • CS Subjects

Company

  • About
  • Contact
  • Privacy Policy
  • Terms & Conditions
  • Sitemap

© 2026 codingstuff.io. All rights reserved.

Built with ❤️ for developers everywhere

/
/
All Tutorials
🌐

JavaScript

21 / 65 topics
21JavaScript Strings22JavaScript String Methods23JavaScript Numbers24JavaScript Math Object25JavaScript Arrays26JavaScript Array Methods27JavaScript Array Iteration
Tutorials/JavaScript/Strings & String Methods
🌐JavaScript

Strings & String Methods

Updated 2026-04-21
9 min

Strings & String Methods

Strings are one of the most frequently used data types. JavaScript provides a rich set of built-in methods for searching, extracting, transforming, and formatting strings.

Creating Strings

creating.js
1const single = 'Hello';
2const double = "Hello";
3const backtick = `Hello`;
4
5// Template literals - interpolation and multi-line
6const name = "Alice";
7const greeting = `Hello, ${name}!`; // "Hello, Alice!"
8const calc = `2 + 2 = ${2 + 2}`; // "2 + 2 = 4"
9const multiline = `Line 1
10Line 2
11Line 3`;

Use Template Literals

Prefer backtick template literals over + concatenation. They're cleaner, support expressions, and handle multi-line strings natively.

String Properties & Indexing

indexing.js
1const str = "JavaScript";
2
3console.log(str.length); // 10
4console.log(str[0]); // "J"
5console.log(str[4]); // "S"
6console.log(str.at(-1)); // "t" (negative indexing with .at())
7console.log(str[100]); // undefined
8
9// Strings are IMMUTABLE
10str[0] = "j"; // No error, but no effect
11console.log(str); // "JavaScript" (unchanged)

Searching Methods

MethodReturnsDescription
indexOf(str)NumberFirst index, or -1
lastIndexOf(str)NumberLast index, or -1
includes(str)BooleanContains substring?
startsWith(str)BooleanStarts with?
endsWith(str)BooleanEnds with?
search(regex)NumberFirst regex match index
searching.js
1const text = "JavaScript is awesome. JavaScript is everywhere.";
2
3console.log(text.indexOf("JavaScript")); // 0
4console.log(text.lastIndexOf("JavaScript")); // 23
5console.log(text.includes("awesome")); // true
6console.log(text.startsWith("Java")); // true
7console.log(text.endsWith("everywhere.")); // true
8
9// Case-insensitive search
10console.log(text.toLowerCase().includes("javascript")); // true

Extracting Substrings

extracting.js
1const str = "Hello, World!";
2
3// slice(start, end) - most versatile
4console.log(str.slice(0, 5)); // "Hello"
5console.log(str.slice(7)); // "World!"
6console.log(str.slice(-6)); // "orld!"
7console.log(str.slice(-6, -1)); // "orld"
8
9// substring(start, end) - no negative indices
10console.log(str.substring(0, 5)); // "Hello"
11
12// charAt(index)
13console.log(str.charAt(0)); // "H"
14console.log(str.charAt(100)); // "" (empty string)

Use slice()

Prefer slice() over substring() - it supports negative indices and has more predictable behavior with swapped arguments.

Transforming Strings

transforming.js
1const str = " Hello, World! ";
2
3// Case
4console.log(str.toUpperCase()); // " HELLO, WORLD! "
5console.log(str.toLowerCase()); // " hello, world! "
6
7// Trimming whitespace
8console.log(str.trim()); // "Hello, World!"
9console.log(str.trimStart()); // "Hello, World! "
10console.log(str.trimEnd()); // " Hello, World!"
11
12// Replacing
13const msg = "I love cats. cats are great.";
14console.log(msg.replace("cats", "dogs")); // "I love dogs. cats are great."
15console.log(msg.replaceAll("cats", "dogs")); // "I love dogs. dogs are great."
16
17// Padding
18console.log("5".padStart(3, "0")); // "005"
19console.log("5".padEnd(3, "0")); // "500"
20console.log("42".padStart(5)); // " 42"
21
22// Repeating
23console.log("ha".repeat(3)); // "hahaha"
24console.log("-".repeat(20)); // "--------------------"

Splitting & Joining

split-join.js
1// Split string → array
2const csv = "apple,banana,cherry";
3const fruits = csv.split(",");
4console.log(fruits); // ["apple", "banana", "cherry"]
5
6const words = "Hello World".split(" ");
7console.log(words); // ["Hello", "World"]
8
9const chars = "Hello".split("");
10console.log(chars); // ["H", "e", "l", "l", "o"]
11
12// Join array → string
13console.log(fruits.join(" | ")); // "apple | banana | cherry"
14console.log(fruits.join("")); // "applebananacherry"

String Comparison

comparison.js
1// Strings compare lexicographically (by Unicode code points)
2console.log("a" < "b"); // true
3console.log("A" < "a"); // true (uppercase comes first)
4console.log("10" < "9"); // true! ("1" < "9" by first char)
5
6// Case-insensitive comparison
7const a = "Hello";
8const b = "hello";
9console.log(a.toLowerCase() === b.toLowerCase()); // true
10
11// localeCompare for proper sorting
12console.log("café".localeCompare("cafe")); // 1 (café comes after)

String Number Comparison

"10" < "9" is true because strings compare character by character. Convert to numbers first if comparing numeric strings.

Common String Patterns

patterns.js
1// Reverse a string
2const reversed = "Hello".split("").reverse().join("");
3console.log(reversed); // "olleH"
4
5// Capitalize first letter
6function capitalize(str) {
7return str.charAt(0).toUpperCase() + str.slice(1);
8}
9console.log(capitalize("hello")); // "Hello"
10
11// Count occurrences
12function countChar(str, char) {
13return str.split(char).length - 1;
14}
15console.log(countChar("banana", "a")); // 3
16
17// Truncate with ellipsis
18function truncate(str, maxLength) {
19return str.length > maxLength
20 ? str.slice(0, maxLength - 3) + "..."
21 : str;
22}
23console.log(truncate("This is a long sentence", 15)); // "This is a lo..."

Practical Example: Slug Generator

slug.js
1function createSlug(title) {
2return title
3 .toLowerCase()
4 .trim()
5 .replaceAll(" ", "-")
6 .replace(/[^a-z0-9-]/g, "") // remove special chars
7 .replace(/-+/g, "-") // collapse multiple hyphens
8 .replace(/^-|-$/g, ""); // trim leading/trailing hyphens
9}
10
11console.log(createSlug("Hello World!"));
12// "hello-world"
13
14console.log(createSlug(" JavaScript: The Good Parts "));
15// "javascript-the-good-parts"
16
17console.log(createSlug("10 Tips & Tricks for React.js"));
18// "10-tips--tricks-for-reactjs"

What's Next?

Next up: Numbers & Math - learn about the Math object, number formatting, parsing, and precision handling.


PreviousJavaScript RecursionNext JavaScript String Methods

Recommended Gear

JavaScript RecursionJavaScript String Methods