Lesson 11: JavaScript String Object
Master text manipulation in JavaScript with the powerful String object and interactive examples.
11.1 Introduction to the String Object
The JavaScript String object is used to represent and manipulate a sequence of characters. Strings are essential for working with text in JavaScript - names, addresses, messages, and more.
Key features: Strings in JavaScript are immutable - once created, they cannot be changed. The String object provides numerous methods for creating, searching in, and modifying strings.
Example 11.1: Creating Strings
// Creating strings
const str1 = 'Single quotes';
const str2 = "Double quotes";
const str3 = `Template literals ${str1}`;
// Using String constructor
const str4 = new String("String object");
document.write(`str1: ${str1}`);
document.write(`<br>str2: ${str2}`);
document.write(`<br>str3: ${str3}`);
document.write(`<br>str4: ${str4}`);
11.2 String Methods
The String object provides numerous methods for working with text. Here are the most commonly used ones:
Formatting Methods
Results will appear here
Case Conversion
Results will appear here
Substring Methods
Results will appear here
Search Methods
Results will appear here
| Method | Description | Example |
|---|---|---|
| charAt(index) | Returns character at specified index | 'hello'.charAt(1) → 'e' |
| concat(str) | Concatenates strings | 'Hello'.concat(' World') → 'Hello World' |
| includes(str) | Checks if string contains substring | 'JavaScript'.includes('Script') → true |
| indexOf(str) | Returns index of first occurrence | 'hello'.indexOf('l') → 2 |
| lastIndexOf(str) | Returns index of last occurrence | 'hello'.lastIndexOf('l') → 3 |
| slice(start, end) | Extracts part of string | 'JavaScript'.slice(0,4) → 'Java' |
| split(separator) | Splits string into array of substrings | 'a,b,c'.split(',') → ['a','b','c'] |
| substring(start, end) | Extracts characters between indices | 'JavaScript'.substring(4,10) → 'Script' |
| toLowerCase() | Converts to lowercase | 'Hello'.toLowerCase() → 'hello' |
| toUpperCase() | Converts to uppercase | 'Hello'.toUpperCase() → 'HELLO' |
| trim() | Removes whitespace from both ends | ' hello '.trim() → 'hello' |
| replace(old, new) | Replaces matched substring | 'hello'.replace('h', 'j') → 'jello' |
11.3 Real-World Applications
String methods are essential for many real-world applications:
11.3.1: Email Validator
Results will appear here
11.3.2: Password Strength Checker
Password strength will appear here
11.3.3: Text Analyzer
Analysis will appear here
11.4 Advanced String Manipulation
Here are some advanced examples of string manipulation:
Example 11.2: Unicode Methods
// Character to Unicode
function charToUnicode() {
const char = prompt("Enter a character:");
if (char) {
const unicode = char.charCodeAt(0);
document.getElementById('unicodeResult').innerHTML =
`Character: ${char}
Unicode: ${unicode}`;
}
}
// Unicode to Character
function unicodeToChar() {
const unicode = prompt("Enter a Unicode value:");
if (unicode) {
const char = String.fromCharCode(unicode);
document.getElementById('charResult').innerHTML =
`Unicode: ${unicode}
Character: ${char}`;
}
}
Character to Unicode
Results will appear here
Unicode to Character
Results will appear here
Example 11.3: String Formatting
// Formatting methods
const text = "JavaScript String";
document.write(`Original: ${text}`);
document.write(`<br>Bold: ${text.bold()}`);
document.write(`<br>Italics: ${text.italics()}`);
document.write(`<br>Fixed: ${text.fixed()}`);
document.write(`<br>Subscript: ${text.sub()}`);
document.write(`<br>Superscript: ${text.sup()}`);
document.write(`<br>Strikethrough: ${text.strike()}`);
document.write(`<br>Font color: ${text.fontcolor('red')}`);
document.write(`<br>Font size: ${text.fontsize(5)}`);