Lesson 4
Handling Strings in JavaScript
Lesson Overview

Welcome to an engaging JavaScript session! In this unit, we will delve deeper into handling string data in JavaScript. Consider situations in which you have to analyze text data, like constructing a web scraper or developing a text-based algorithm to interpret user reviews of a website. All these cases require efficient handling of strings, which involves analyzing and manipulating them. In this lesson, we will focus on how to traverse strings and perform operations on each character using JavaScript.

The objective of this lesson is to become proficient in using JavaScript loops with a specific emphasis on strings. We will explore the techniques of string indexing and practice character operations using JavaScript functions.

Working with ASCII Codes in Characters

Characters in JavaScript can be manipulated using their ASCII values. ASCII (American Standard Code for Information Interchange) is a character encoding standard used to represent text in computers and other devices that use text. Every character has a unique ASCII value.

You can convert a character into its ASCII value using the charCodeAt() method:

JavaScript
1let c = 'A'; 2let asciiVal = c.charCodeAt(0); // Retrieves the ASCII value of the character at index 0 of the string c, which is 'A', and assigns it to the variable asciiVal. 3console.log(`The ASCII value of ${c} is: ${asciiVal}`); 4// Prints: The ASCII value of A is: 65

Similarly, you can convert an ASCII value back to its corresponding character using String.fromCharCode():

JavaScript
1let asciiVal = 65; 2let c = String.fromCharCode(asciiVal); 3console.log(`The character of ASCII value ${asciiVal} is: ${c}`); 4// Prints: The character of ASCII value 65 is: A

Manipulating the ASCII value of characters can be quite useful in certain situations. For example, to convert a lowercase letter to uppercase (or vice versa), you could subtract (or add) 32 to the character's ASCII value.

String Indexing Reminder

JavaScript strings work with a zero-based indexing system. This means that you can access specific characters in a string by using their position.

Please note: If you try to access an index that does not exist in your string, JavaScript will return undefined. Hence, it is always recommended to check the string length before accessing any index.

Here's an example:

JavaScript
1let text = "Hello, JavaScript!"; 2let index = 9; // The index we want to access 3 4if (index < text.length) { 5 let charAtIndex = text.charAt(index); 6 console.log(`The character at index ${index} is: ${charAtIndex}`); 7} else { 8 console.log(`The index ${index} is out of bounds for the string!`); 9} 10 11// Prints: The character at index 9 is: v
Character Operations

Let's now explore character operations in JavaScript. String methods such as toUpperCase() and toLowerCase() are used to change the case of a character. Additionally, we can create custom functions to check whether a character is lowercase or uppercase.

  • Using toUpperCase() and toLowerCase() to change the case of characters:
JavaScript
1let s = "mark"; 2let result = ''; 3for (let i = 0; i < s.length; i++) { 4 result += s.charAt(i).toUpperCase(); 5 // You can also use s[i] instead of s.charAt(i) 6} 7console.log(result); // Prints: 'MARK' 8 9s = "Mark"; 10result = ''; 11for (let i = 0; i < s.length; i++) { 12 result += s.charAt(i).toLowerCase(); 13} 14console.log(result); // Prints: 'mark'
  • Implementing custom functions to check the case of characters:
JavaScript
1function isLowerCase(char) { 2 return char === char.toLowerCase() && char !== char.toUpperCase(); 3} 4 5function isUpperCase(char) { 6 return char === char.toUpperCase() && char !== char.toLowerCase(); 7} 8 9console.log("Is 'a' lowercase? " + isLowerCase('a')); // Prints: true 10console.log("Is 'B' lowercase? " + isLowerCase('B')); // Prints: false 11 12console.log("Is 'a' uppercase? " + isUpperCase('a')); // Prints: false 13console.log("Is 'B' uppercase? " + isUpperCase('B')); // Prints: true

In both functions, the && operator (logical AND) ensures that both conditions must be true for the function to return true. For example, in the isLowerCase function, it checks that the character equals its lowercase version (char === char.toLowerCase()) and that it does not equal its uppercase version (char !== char.toUpperCase()). Without the second condition, non-alphabetic characters would also be considered lowercase letters. Both conditions must be satisfied to confirm that the character is indeed lowercase.

  • Checking whether a character is a letter, digit, or alphanumeric using regular expressions:
JavaScript
1function isLetter(char) { 2 return /^[a-zA-Z]$/.test(char); 3} 4 5function isDigit(char) { 6 return /^[0-9]$/.test(char); 7} 8 9function isLetterOrDigit(char) { 10 return /^[a-zA-Z0-9]$/.test(char); 11} 12 13console.log(isLetter('C')); // Prints: true 14console.log(isLetter('+')); // Prints: false 15 16console.log(isDigit('9')); // Prints: true 17console.log(isDigit('D')); // Prints: false 18 19console.log(isLetterOrDigit('6')); // Prints: true 20console.log(isLetterOrDigit('k')); // Prints: true 21console.log(isLetterOrDigit('?')); // Prints: false

Regular Expressions:

  • Regular expressions, often abbreviated as regex, are sequences of characters that form a search pattern. They are mainly used for pattern matching with strings.
  • In this context, the regex /^[a-zA-Z]$/ checks if a single character string is either a lowercase (a-z) or uppercase (A-Z) English letter. The ^ and $ symbols are anchors that ensure the match is done on the entire string, meaning it should be exactly one letter.
Lesson Summary and Practice

Excellent work! We have learned how to work with strings in JavaScript by looping over them, managing string indices, and manipulating characters using JavaScript methods. Moreover, we also have explored strategies to manage out-of-bounds indices while dealing with strings in our programs.

Real-world problems abound where string operations can be handy. From designing smart typewriters and web scrapers to crafting AI bots, mastering string operations is a valuable skill in the world of programming. Therefore, don't waste any time! Jump into the practice problems to reinforce your learning. Your journey is just beginning — see you in the upcoming sessions!

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.