JavaScript Fundamentals

String Methods

Essential methods to search, extract, transform, and manipulate text

Find videos you like?

Save to resource drawer for future reference!

What are String Methods?

String methods are built-in functions that help you work with text. Search, slice, replace, change case - all without changing the original string!

Strings are Immutable

String methods never change the original string. They always return a new value. Think of it like photocopying - the original stays intact!

Method Categories

Different methods for different tasks

🔍

Search

indexOf, includes, startsWith, endsWith

✂️

Extract

slice, substring, charAt

🔄

Transform

replace, trim, toUpperCase, toLowerCase

📋

Split

split, join (array method)

Searching Strings

Find text within strings

Search Methods

indexOf() - Find position

Returns the index of first occurrence, or -1 if not found

const text = 'Hello World';
console.log(text.indexOf('World'));  // 6
console.log(text.indexOf('xyz'));    // -1

includes() - Check if exists

Returns true if substring exists, false otherwise

const text = 'JavaScript is awesome';
console.log(text.includes('Java'));  // true
console.log(text.includes('Python')); // false

startsWith() & endsWith()

Check if string starts or ends with specific text

const file = 'image.png';
console.log(file.startsWith('image'));  // true
console.log(file.endsWith('.png'));     // true
console.log(file.endsWith('.jpg'));     // false

Searching Examples

Finding text in strings

javascript

code

DarkEditable

const email = 'user@example.com';

// Check if it's a valid email format
if (email.includes('@') && email.includes('.')) {
  console.log('Valid email format');
}

// Find position of @
const atIndex = email.indexOf('@');
console.log('@ is at position:', atIndex);  // 4

// Check domain
if (email.endsWith('.com')) {
  console.log('This is a .com email');
}

// Real-world: File validation
const filename = 'document.pdf';

if (filename.endsWith('.pdf')) {
  console.log('PDF file detected');
} else if (filename.endsWith('.doc') || filename.endsWith('.docx')) {
  console.log('Word document detected');
}

// Check if URL is HTTPS
const url = 'https://example.com';
if (url.startsWith('https://')) {
  console.log('Secure connection');
}

// Search from specific position
const text = 'Hello Hello Hello';
console.log(text.indexOf('Hello'));      // 0 (first occurrence)
console.log(text.indexOf('Hello', 1));   // 6 (search from index 1)
console.log(text.lastIndexOf('Hello'));  // 12 (last occurrence)

Console Output

Click "Run Code" to see output here...

Extracting Parts of Strings

Get portions of text

Extract Methods

slice() - Extract portion

Extract from start to end (supports negative indexes)

const text = 'JavaScript';
console.log(text.slice(0, 4));   // 'Java'
console.log(text.slice(4));      // 'Script'
console.log(text.slice(-6));     // 'Script' (from end)

substring() - Similar to slice

Extract between two indexes (no negative indexes)

const text = 'JavaScript';
console.log(text.substring(0, 4));  // 'Java'
console.log(text.substring(4));     // 'Script'

charAt() - Get character at index

Returns character at specific position

const text = 'Hello';
console.log(text.charAt(0));  // 'H'
console.log(text.charAt(4));  // 'o'
console.log(text[0]);         // 'H' (bracket notation works too)

Extracting Examples

Getting parts of strings

javascript

code

DarkEditable

const text = 'JavaScript Programming';

// Get first word
const firstWord = text.slice(0, 10);
console.log(firstWord);  // 'JavaScript'

// Get last word
const lastWord = text.slice(11);
console.log(lastWord);  // 'Programming'

// Get last 4 characters (negative index)
const last4 = text.slice(-4);
console.log(last4);  // 'ming'

// Real-world: Extract username from email
const email = 'john.doe@example.com';
const atIndex = email.indexOf('@');
const username = email.slice(0, atIndex);
console.log(username);  // 'john.doe'

// Real-world: Get file extension
const filename = 'document.pdf';
const dotIndex = filename.lastIndexOf('.');
const extension = filename.slice(dotIndex + 1);
console.log(extension);  // 'pdf'

// Get initials
const fullName = 'John Doe';
const spaceIndex = fullName.indexOf(' ');
const firstName = fullName.slice(0, spaceIndex);
const lastName = fullName.slice(spaceIndex + 1);
const initials = firstName[0] + lastName[0];
console.log(initials);  // 'JD'

// Extract domain from URL
const url = 'https://www.example.com/page';
const start = url.indexOf('//') + 2;
const end = url.indexOf('/', start);
const domain = url.slice(start, end);
console.log(domain);  // 'www.example.com'

Console Output

Click "Run Code" to see output here...

Changing Case

Convert to uppercase or lowercase

Case Methods

toUpperCase() - All caps

const text = 'hello';
console.log(text.toUpperCase());  // 'HELLO'

toLowerCase() - All lowercase

const text = 'HELLO';
console.log(text.toLowerCase());  // 'hello'

Case Conversion Examples

Changing text case

javascript

code

DarkEditable

const text = 'JavaScript';

// Convert to uppercase
console.log(text.toUpperCase());  // 'JAVASCRIPT'

// Convert to lowercase
console.log(text.toLowerCase());  // 'javascript'

// Real-world: Case-insensitive comparison
const input = 'HELLO';
const expected = 'hello';

if (input.toLowerCase() === expected.toLowerCase()) {
  console.log('Match!');  // This runs
}

// Real-world: Capitalize first letter
const name = 'alice';
const capitalized = name.charAt(0).toUpperCase() + name.slice(1);
console.log(capitalized);  // 'Alice'

// Capitalize all words
const title = 'javascript is awesome';
const words = title.split(' ');
const capitalizedWords = words.map(word => 
  word.charAt(0).toUpperCase() + word.slice(1)
);
const result = capitalizedWords.join(' ');
console.log(result);  // 'Javascript Is Awesome'

// Real-world: Email validation (case-insensitive)
const email1 = 'USER@EXAMPLE.COM';
const email2 = 'user@example.com';

if (email1.toLowerCase() === email2.toLowerCase()) {
  console.log('Same email!');
}

// Constant names (convention)
const status = 'success';
const constantName = status.toUpperCase();
console.log(constantName);  // 'SUCCESS'

Console Output

Click "Run Code" to see output here...

trim() - Remove Whitespace

Clean up spaces at start and end

Trim Methods

trim() - Both ends

const text = '   Hello   ';
console.log(text.trim());  // 'Hello'

trimStart() - Left side only

const text = '   Hello';
console.log(text.trimStart());  // 'Hello'

trimEnd() - Right side only

const text = 'Hello   ';
console.log(text.trimEnd());  // 'Hello'

trim() Examples

Cleaning up whitespace

javascript

code

DarkEditable

// Remove spaces from both ends
const text = '   Hello World   ';
console.log(text.trim());  // 'Hello World'

// Real-world: Clean user input
const userInput = '  alice@example.com  ';
const cleanEmail = userInput.trim();
console.log(cleanEmail);  // 'alice@example.com'

// Form validation
const username = '  john  ';
if (username.trim() === '') {
  console.log('Username is required!');
} else {
  console.log('Username:', username.trim());
}

// Clean multiple inputs
const inputs = ['  Alice  ', '  Bob  ', '  Charlie  '];
const cleaned = inputs.map(input => input.trim());
console.log(cleaned);  // ['Alice', 'Bob', 'Charlie']

// trimStart() - Keep trailing spaces
const code = '    const x = 5;';
console.log(code.trimStart());  // 'const x = 5;'

// trimEnd() - Keep leading spaces
const text2 = 'Hello    ';
console.log(text2.trimEnd());  // 'Hello'

// Real-world: Clean CSV data
const csvRow = '  John  ,  25  ,  Developer  ';
const values = csvRow.split(',').map(v => v.trim());
console.log(values);  // ['John', '25', 'Developer']

Console Output

Click "Run Code" to see output here...

replace() - Replace Text

Substitute one text with another

Replace Methods

replace() - First occurrence

Replaces only the first match

const text = 'Hello Hello';
console.log(text.replace('Hello', 'Hi'));
// 'Hi Hello' (only first replaced)

replaceAll() - All occurrences

Replaces all matches (ES2021)

const text = 'Hello Hello Hello';
console.log(text.replaceAll('Hello', 'Hi'));
// 'Hi Hi Hi' (all replaced)

replace() Examples

Substituting text

javascript

code

DarkEditable

const text = 'I love JavaScript';

// Replace one word
const newText = text.replace('love', 'enjoy');
console.log(newText);  // 'I enjoy JavaScript'

// Original unchanged
console.log(text);  // 'I love JavaScript'

// Replace all occurrences
const repeated = 'apple apple apple';
const allReplaced = repeated.replaceAll('apple', 'orange');
console.log(allReplaced);  // 'orange orange orange'

// Real-world: Mask credit card
const cardNumber = '1234-5678-9012-3456';
const masked = cardNumber.replace(/\d(?=\d{4})/g, '*');
console.log(masked);  // '****-****-****-3456'

// Or simpler masking
const last4 = cardNumber.slice(-4);
const maskedSimple = '****-****-****-' + last4;
console.log(maskedSimple);  // '****-****-****-3456'

// Replace spaces with dashes
const title = 'My Blog Post Title';
const slug = title.toLowerCase().replaceAll(' ', '-');
console.log(slug);  // 'my-blog-post-title'

// Real-world: Clean phone number
const phone = '(123) 456-7890';
const cleaned = phone.replaceAll('(', '')
                     .replaceAll(')', '')
                     .replaceAll(' ', '')
                     .replaceAll('-', '');
console.log(cleaned);  // '1234567890'

// Replace with function
const prices = 'Item costs $10';
const updated = prices.replace('$10', '$20');
console.log(updated);  // 'Item costs $20'

Console Output

Click "Run Code" to see output here...

split() - String to Array

Break string into array of parts

Split & Join

Converts string to array (use array join() to reverse)

const text = 'apple,banana,orange';

// Split by comma
const fruits = text.split(',');
console.log(fruits);
// ['apple', 'banana', 'orange']

// Join back
const joined = fruits.join(', ');
console.log(joined);
// 'apple, banana, orange'

split() Examples

Converting strings to arrays

javascript

code

DarkEditable

// Split by space
const sentence = 'Hello World JavaScript';
const words = sentence.split(' ');
console.log(words);  // ['Hello', 'World', 'JavaScript']

// Count words
console.log('Word count:', words.length);  // Word count: 3

// Split by comma
const csv = 'John,25,Developer';
const data = csv.split(',');
console.log(data);  // ['John', '25', 'Developer']

// Split into characters
const word = 'Hello';
const chars = word.split('');
console.log(chars);  // ['H', 'e', 'l', 'l', 'o']

// Reverse a string
const reversed = word.split('').reverse().join('');
console.log(reversed);  // 'olleH'

// Split with limit
const text = 'a-b-c-d-e';
const limited = text.split('-', 3);
console.log(limited);  // ['a', 'b', 'c']

// Real-world: Parse URL path
const url = 'https://example.com/blog/post/123';
const parts = url.split('/');
console.log(parts);
// ['https:', '', 'example.com', 'blog', 'post', '123']

const postId = parts[parts.length - 1];
console.log('Post ID:', postId);  // Post ID: 123

// Real-world: Process CSV line
const csvLine = 'Alice,30,Engineer,New York';
const [name, age, job, city] = csvLine.split(',');
console.log(`${name} is a ${age} year old ${job} from ${city}`);
// Alice is a 30 year old Engineer from New York

// Split by multiple spaces
const messyText = 'Hello    World';
const cleaned = messyText.split(/\s+/);  // regex for one or more spaces
console.log(cleaned);  // ['Hello', 'World']

// Get domain from email
const email = 'user@example.com';
const domain = email.split('@')[1];
console.log(domain);  // 'example.com'

Console Output

Click "Run Code" to see output here...

Other Useful Methods

repeat(), padStart(), padEnd()

Bonus Methods

repeat() - Repeat string

const text = 'Ha';
console.log(text.repeat(3));  // 'HaHaHa'

padStart() - Add padding to start

const num = '5';
console.log(num.padStart(3, '0'));  // '005'

padEnd() - Add padding to end

const text = 'Hi';
console.log(text.padEnd(5, '!'));  // 'Hi!!!'

Other Methods Examples

repeat(), padStart(), padEnd()

javascript

code

DarkEditable

// repeat() - Repeat string n times
const star = '*';
const line = star.repeat(10);
console.log(line);  // '**********'

// Create separator
const separator = '-'.repeat(20);
console.log(separator);  // '--------------------'

// padStart() - Add to beginning
const id = '42';
const paddedId = id.padStart(5, '0');
console.log(paddedId);  // '00042'

// Real-world: Format time
const hours = '5';
const minutes = '7';
const time = `${hours.padStart(2, '0')}:${minutes.padStart(2, '0')}`;
console.log(time);  // '05:07'

// padEnd() - Add to end
const name = 'Alice';
const padded = name.padEnd(10, '.');
console.log(padded);  // 'Alice.....'

// Create aligned text
const items = ['Apple', 'Banana', 'Cherry'];
items.forEach(item => {
  console.log(item.padEnd(10, '.') + '$5');
});
// Apple.....$5
// Banana....$5
// Cherry....$5

// Real-world: Format invoice
const products = [
  { name: 'Laptop', price: 999 },
  { name: 'Mouse', price: 25 },
  { name: 'Keyboard', price: 75 }
];

products.forEach(p => {
  const line = p.name.padEnd(15, '.') + '$' + p.price;
  console.log(line);
});
// Laptop.........$999
// Mouse...........$25
// Keyboard........$75

// Combine methods
const code = '123'.padStart(6, '0').toUpperCase();
console.log(code);  // '000123'

Console Output

Click "Run Code" to see output here...

Quick Reference & Best Practices

Do This ✅

• Store result: const upper = text.toUpperCase()
• Use trim() on user input
• Use toLowerCase() for comparisons
• Use split() to process CSV data
• Chain methods for complex operations

Avoid This ❌

• Don't forget methods return new strings
• Don't compare without toLowerCase()
• Don't use replace() for all occurrences (use replaceAll())
• Don't forget to trim user input
• Don't assume method support (check compatibility)

Method Categories

Search:

• indexOf() → position

• includes() → true/false

• startsWith() / endsWith()

Extract:

• slice() → portion

• substring() → portion

• charAt() → character

Transform:

• toUpperCase() / toLowerCase()

• trim() / trimStart() / trimEnd()

• replace() / replaceAll()

Split/Join:

• split() → array

• Array.join() → string

• repeat() → repeated string

Remember: Immutability

Strings are immutable - methods never change the original. Always use the returned value: const result = text.toUpperCase()

Previous Topic

Template Literals

String interpolation and multi-line strings with ES6+ template literals.

Next Topic

Regular Expressions

Pattern matching and text manipulation with regex basics.

Ask a Question

Have a question about String Methods? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Fundamentals

String Methods

Essential methods to search, extract, transform, and manipulate text

Find videos you like?

Save to resource drawer for future reference!

What are String Methods?

String methods are built-in functions that help you work with text. Search, slice, replace, change case - all without changing the original string!

Strings are Immutable

String methods never change the original string. They always return a new value. Think of it like photocopying - the original stays intact!

Method Categories

Different methods for different tasks

🔍

Search

indexOf, includes, startsWith, endsWith

✂️

Extract

slice, substring, charAt

🔄

Transform

replace, trim, toUpperCase, toLowerCase

📋

Split

split, join (array method)

Searching Strings

Find text within strings

Search Methods

indexOf() - Find position

Returns the index of first occurrence, or -1 if not found

const text = 'Hello World';
console.log(text.indexOf('World'));  // 6
console.log(text.indexOf('xyz'));    // -1

includes() - Check if exists

Returns true if substring exists, false otherwise

const text = 'JavaScript is awesome';
console.log(text.includes('Java'));  // true
console.log(text.includes('Python')); // false

startsWith() & endsWith()

Check if string starts or ends with specific text

const file = 'image.png';
console.log(file.startsWith('image'));  // true
console.log(file.endsWith('.png'));     // true
console.log(file.endsWith('.jpg'));     // false

Searching Examples

Finding text in strings

javascript

code

DarkEditable

const email = 'user@example.com';

// Check if it's a valid email format
if (email.includes('@') && email.includes('.')) {
  console.log('Valid email format');
}

// Find position of @
const atIndex = email.indexOf('@');
console.log('@ is at position:', atIndex);  // 4

// Check domain
if (email.endsWith('.com')) {
  console.log('This is a .com email');
}

// Real-world: File validation
const filename = 'document.pdf';

if (filename.endsWith('.pdf')) {
  console.log('PDF file detected');
} else if (filename.endsWith('.doc') || filename.endsWith('.docx')) {
  console.log('Word document detected');
}

// Check if URL is HTTPS
const url = 'https://example.com';
if (url.startsWith('https://')) {
  console.log('Secure connection');
}

Console Output

Click "Run Code" to see output here...

Extracting Parts of Strings

Get portions of text

Extract Methods

slice() - Extract portion

Extract from start to end (supports negative indexes)

const text = 'JavaScript';
console.log(text.slice(0, 4));   // 'Java'
console.log(text.slice(4));      // 'Script'
console.log(text.slice(-6));     // 'Script' (from end)

substring() - Similar to slice

Extract between two indexes (no negative indexes)

const text = 'JavaScript';
console.log(text.substring(0, 4));  // 'Java'
console.log(text.substring(4));     // 'Script'

charAt() - Get character at index

Returns character at specific position

const text = 'Hello';
console.log(text.charAt(0));  // 'H'
console.log(text.charAt(4));  // 'o'
console.log(text[0]);         // 'H' (bracket notation works too)

Extracting Examples

Getting parts of strings

javascript

code

DarkEditable

const text = 'JavaScript Programming';

// Get first word
const firstWord = text.slice(0, 10);
console.log(firstWord);  // 'JavaScript'

// Get last word
const lastWord = text.slice(11);
console.log(lastWord);  // 'Programming'

// Get last 4 characters (negative index)
const last4 = text.slice(-4);
console.log(last4);  // 'ming'

// Real-world: Extract username from email
const email = 'john.doe@example.com';
const atIndex = email.indexOf('@');
const username = email.slice(0, atIndex);
console.log(username);  // 'john.doe'

// Real-world: Get file extension
const filename = 'document.pdf';
const dotIndex = filename.lastIndexOf('.');
const extension = filename.slice(dotIndex + 1);
console.log(extension);  // 'pdf'

Console Output

Click "Run Code" to see output here...

Changing Case

Convert to uppercase or lowercase

Case Methods

toUpperCase() - All caps

const text = 'hello';
console.log(text.toUpperCase());  // 'HELLO'

toLowerCase() - All lowercase

const text = 'HELLO';
console.log(text.toLowerCase());  // 'hello'