Explore String Object Methods in JavaScript

Introduction

In this lab, you will explore essential JavaScript string object methods to manipulate and transform text data. Through a series of practical coding exercises, you'll learn how to create strings, check their length, convert case, extract characters, replace content, and find character positions using built-in JavaScript string methods.

The lab covers fundamental string manipulation techniques such as using the length property to determine string size, toLowerCase() and toUpperCase() for case conversion, charAt() and substring() for character extraction, string replacement and splitting, and indexOf() for locating specific characters within a string. By working through these steps, you'll gain hands-on experience with core string operations that are crucial for effective text processing in JavaScript programming.

Create a String and Check Its Length

In this step, you'll learn how to create strings in JavaScript and check their length using the length property. Strings are fundamental data types in JavaScript used to store and manipulate text.

Open the WebIDE and create a new file named string-basics.js in the ~/project directory. We'll write our JavaScript code to explore string creation and length checking.

// Creating a string using different methods
let greeting = "Hello, JavaScript!";
let name = "John Doe";
let emptyString = "";

// Checking string length using the length property
console.log("Greeting length:", greeting.length);
console.log("Name length:", name.length);
console.log("Empty string length:", emptyString.length);

When you run this code, you'll see the length of each string printed to the console. The length property returns the number of characters in a string.

Example output:

Greeting length: 18
Name length: 8
Empty string length: 0

A few key points to remember:

• Strings can be created using single quotes '' or double quotes "".
• The length property works on any string, including empty strings.
• Spaces and punctuation marks are counted in the string length.

Convert String Case with toLowerCase() and toUpperCase()

In this step, you'll learn how to convert string cases using two essential JavaScript string methods: toLowerCase() and toUpperCase(). These methods allow you to change the case of strings easily.

Open the WebIDE and continue working in the ~/project/string-basics.js file from the previous step. Add the following code to explore case conversion:

// Original string
let originalText = "Hello, JavaScript Programming!";

// Convert to lowercase
let lowercaseText = originalText.toLowerCase();
console.log("Lowercase:", lowercaseText);

// Convert to uppercase
let uppercaseText = originalText.toLowerCase().toUpperCase();
console.log("Uppercase:", uppercaseText);

// Practical example: username normalization
let username = "JohnDoe";
let normalizedUsername = username.toLowerCase();
console.log("Normalized Username:", normalizedUsername);

When you run this code, you'll see the following output:

Example output:

Lowercase: hello, javascript programming!
Uppercase: HELLO, JAVASCRIPT PROGRAMMING!
Normalized Username: johndoe

Key points about case conversion methods:

• toLowerCase() converts all characters in a string to lowercase
• toUpperCase() converts all characters in a string to uppercase
• These methods are useful for string comparison, normalization, and formatting
• The original string remains unchanged; these methods return a new string

Extract Characters and Substrings with charAt() and substring()

In this step, you'll learn how to extract individual characters and substrings from a string using the charAt() and substring() methods in JavaScript.

Open the WebIDE and continue working in the ~/project/string-basics.js file. Add the following code to explore character and substring extraction:

// Original string
let message = "JavaScript is awesome!";

// Extract a single character using charAt()
let firstChar = message.charAt(0);
let fifthChar = message.charAt(4);
console.log("First character:", firstChar);
console.log("Fifth character:", fifthChar);

// Extract substrings using substring()
let partialString1 = message.substring(0, 10);
let partialString2 = message.substring(11);
console.log("First 10 characters:", partialString1);
console.log("From 11th character:", partialString2);

// Practical example: extracting username from email
let email = "john.doe@example.com";
let username = email.substring(0, email.indexOf("@"));
console.log("Username:", username);

When you run this code, you'll see the following output:

Example output:

First character: J
Fifth character: S
First 10 characters: JavaScript
From 11th character: is awesome!
Username: john.doe

Key points about character and substring extraction:

• charAt(index) returns the character at a specific index (zero-indexed)
• substring(startIndex, endIndex) extracts a portion of the string
• If no end index is provided, substring() extracts to the end of the string
• Indexes start at 0, so the first character is at index 0

Replace and Split String Content

In this step, you'll learn how to manipulate strings using the replace() and split() methods in JavaScript. These methods are powerful tools for modifying and breaking down string content.

Open the WebIDE and continue working in the ~/project/string-basics.js file. Add the following code to explore string replacement and splitting:

// Original string
let sentence = "Hello, world! Welcome to JavaScript programming.";

// Replace method: replace specific words or characters
let replacedSentence = sentence.replace("world", "JavaScript");
console.log("Replaced sentence:", replacedSentence);

// Global replacement using regular expression
let cleanedSentence = sentence.replace(/[!.]/g, "");
console.log("Cleaned sentence:", cleanedSentence);

// Split method: convert string to an array
let words = sentence.split(" ");
console.log("Words array:", words);

// Split with limit
let limitedWords = sentence.split(" ", 3);
console.log("Limited words:", limitedWords);

// Practical example: parsing CSV-like data
let userData = "John,Doe,30,Developer";
let userDetails = userData.split(",");
console.log("User First Name:", userDetails[0]);
console.log("User Last Name:", userDetails[1]);

When you run this code, you'll see the following output:

Example output:

Replaced sentence: Hello, JavaScript! Welcome to JavaScript programming.
Cleaned sentence: Hello, world Welcome to JavaScript programming
Words array: [ 'Hello,', 'world!', 'Welcome', 'to', 'JavaScript', 'programming.' ]
Limited words: [ 'Hello,', 'world!', 'Welcome' ]
User First Name: John
User Last Name: Doe

Key points about replace() and split():

• replace() substitutes part of a string with another string
• Use regular expressions with replace() for global replacements
• split() breaks a string into an array based on a separator
• split() can take an optional limit parameter to control the number of splits

Find Character Positions with indexOf()

In this step, you'll learn how to find the position of characters or substrings within a string using the indexOf() method in JavaScript. This method is crucial for searching and locating specific content within strings.

Open the WebIDE and continue working in the ~/project/string-basics.js file. Add the following code to explore character and substring positioning:

// Original string
let message = "Hello, JavaScript is awesome!";

// Find the position of a character
let commaPosition = message.indexOf(",");
let firstJPosition = message.indexOf("J");
console.log("Position of comma:", commaPosition);
console.log("First position of 'J':", firstJPosition);

// Find the position of a substring
let javascriptPosition = message.indexOf("JavaScript");
console.log("Position of 'JavaScript':", javascriptPosition);

// Find a character starting from a specific index
let secondJPosition = message.indexOf("J", commaPosition + 1);
console.log("Second position of 'J':", secondJPosition);

// Handling characters not found
let xPosition = message.indexOf("X");
console.log("Position of 'X':", xPosition);

// Practical example: email validation
let email = "user@example.com";
let atSymbolPosition = email.indexOf("@");
let domainName = email.substring(atSymbolPosition + 1);
console.log("Domain name:", domainName);

When you run this code, you'll see the following output:

Example output:

Position of comma: 5
First position of 'J': 7
Position of 'JavaScript': 7
Second position of 'J': 7
Position of 'X': -1
Domain name: example.com

Key points about indexOf():

• Returns the first index where the specified character or substring is found
• If the character/substring is not found, it returns -1
• Can start searching from a specific index using an optional second parameter
• Useful for searching, validating, and extracting parts of strings

Summary

In this lab, participants explored fundamental string manipulation techniques in JavaScript, focusing on key methods and properties. The lab guided learners through creating strings, checking their length, and performing case conversions using methods like length, toLowerCase(), and toUpperCase(). Participants learned how to create strings with different syntax, measure string lengths, and transform text cases dynamically.

The practical exercises demonstrated essential string operations, including character extraction, substring manipulation, and understanding string indexing. By working through hands-on code examples, students gained practical insights into JavaScript's string object methods, enabling them to effectively handle and modify text data in their programming projects.