Working with Strings - JavaScript Code Snippets

Some sample JavaScript code snippets for:

Declaring string variables in JavaScript and using typeof to test that a variable contains a string.
Concatenating strings with the + operator and spliting them with the slice() method.
Using index position and the .length property to work with string characters.
Removing whitespace with trim() and changing character case with toUpperCase() and toLowerCase().
Using various methods to query a string by index position and character(s).
Searching and replacing string characters.

<!DOCTYPE html><html lang="en">
        <head>
            <meta charset="UTF-8">
            <style>@media (min-width:1200px){header{padding:2% calc((100% - 800px)/ 2) 3% calc((100% - 800px)/ 2);margin:0 auto}}@media (min-width:1025px) and (max-width:1199px){header{padding:3% 14% 4% 14%}}@media (min-width:768px) and (max-width:1024px){header{padding:3% 8% 4% 8%}}@media (max-width:767px){header{padding:6% 13% 9% 13%}}h1 .font-mono{color:#888}body{font-family:sans-serif}li,p{font-size:18px;line-height:1.5}li{margin-bottom:12px}</style>
        </head>
        <body>
        <header>
            <h1>Working with Strings: <span class="font-mono">JS Code Snippets</span></h1>
            <p>See the online Lesson: <a href='https://www.munnelly.com/javascript/strings/'>Working with Strings</a></p>
            <p>View the JavaScript output in your web browser by pressing the following keys and selecting the <b>Console</b> tab:</p>
            <ul>
                <li><b>Ctrl</b> + <b>Shift</b> + <b>i</b> (Windows)</li>
                <li><b>⌘ Command</b> + <b>Shift</b> + <b>i</b> (Mac).</li>
            </ul>
        </header>
        <main>

<script>
            console.log("%c=== ASSIGNING STRING VARIABLES ===", "color: white; background-color: green; padding: 2px");
            const myStr1 = "Hello"; // JavaScript treats myStr1 as a string
            const myStr2 = 'World'; // JavaScript treats myStr2 as a string
            const myStr3 = " ";     // JavaScript treats myStr3 as a string
            console.log(`myStr1: ${myStr1}`);
            console.log(`myStr2: ${myStr2}`);
            console.log(`myStr3: ${myStr3}`);
    
            let myStr4 = ""; // String is empty
            console.log(`myStr4 no value: ${myStr4}`);
            myStr4 = "Some text here"; // String now has a value
            console.log(`myStr4 has value: ${myStr4}`);
    
            let myStr5 = "Things are looking good."; 
            console.log(`myStr5 - First text value: ${myStr5}`);
            myStr5 = "Things are looking even better."; // New value assigned
            console.log(`myStr5 - Second text value: ${myStr5}`);
    
    
            console.log("\n%c=== THE STRING DATA TYPE ===", "color: white; background-color: green; padding: 2px");
            console.log(`Data type of myStr1: ${typeof myStr1}`);
            console.log(`Data type of myStr2: ${typeof myStr2}`);
            console.log(`Data type of myStr3: ${typeof myStr3}`);
            console.log(`Data type of myStr4: ${typeof myStr4}`);
            console.log(`Data type of myStr5: ${typeof myStr5}`);
    
            console.log("\n%c=== STRINGS AND INDEX POSITION ===", "color: white; background-color: green; padding: 2px");
    
            let strHelloWorld = "Hello, World!";
            console.log(`Position [0]: ${strHelloWorld[0]};`)
            console.log(`Position [5]: ${strHelloWorld[5]};`)
            console.log(`Position [6]: ${strHelloWorld[6]};`)
            console.log(`Position [7]: ${strHelloWorld[7]};`)
            console.log(`Position [12]: ${strHelloWorld[12]};`)
    
            console.log("\n%c=== STRING LENGTH ===", "color: white; background-color: green; padding: 2px");
    
            console.log("Number of characters in strHelloWorld: "+strHelloWorld.length);
    
            console.log("\n%c=== TRIMMING STRINGS ===", "color: white; background-color: green; padding: 2px");
            let strUserFirstName = "  Marie ";
            console.log(`Original string variable: ${strUserFirstName};`)
            strUserFirstName = strUserFirstName.trim();
            console.log(`Trimmed string variable: ${strUserFirstName};`)
    
    
            console.log("\n%c=== CONCATENATING STRINGS ===", "color: white; background-color: green; padding: 2px");
            console.log(`"John"+"Lennon": ${"John"+"Lennon"}`);
            console.log(`"John "+"Lennon": ${"John "+"Lennon"}`);
            console.log(`"John" +" Lennon": ${"John" +" Lennon"}`);
    
            console.log("\n%c=== SPLICING STRINGS ===", "color: white; background-color: green; padding: 2px");
            let strForSplicing = "A Long Day\'s Jounrey Into Night";
            console.log(`Splice at position [6] to end: ${strForSplicing.slice(6)}`);
            console.log(`Splice from position [7] to [10]: ${strForSplicing.slice(7,10)}`);
    
            console.log("\n%c=== STRING CASE CONVERSION ===", "color: white; background-color: green; padding: 2px");
    
            let strMakeUpper = "U2\'s First Album";
            let strMakeLower = "U2\'s Second Album";
            console.log(`Original String One: ${strMakeUpper}`);
            strMakeUpper = strMakeUpper.toUpperCase();
            console.log(`All Uppercase String One: ${strMakeUpper}`);
            console.log(`Original String Two: ${strMakeLower}`);
            strMakeLower = strMakeLower.toLowerCase(); 
            console.log(`All Lowercase String Two: ${strMakeLower}`);
    
            console.log("\n%c=== STRING QUERY BY INDEX POSITION(S) ===", "color: white; background-color: green; padding: 2px");
    
            // Using charAt()
            const strMovieTitle = "The Man Who Shot Liberty Valence";
            console.log(`Character at position [0]: ${strMovieTitle.charAt(0)}`);
            console.log(`Character at position [17]: ${strMovieTitle.charAt(17)}`);
    
            // Using substring()
            console.log(`Characters from position [0] to before position [3]: ${strMovieTitle.substring(0,3)}`);
            console.log(`Characters from position [4] to string end: ${strMovieTitle.substring(4)}`);
    
            // Using substr()
            console.log(`3 Characters, beginning at position [0]: ${strMovieTitle.substr(0,3)}`);
            console.log(`8 Characters, beginning at position [4]: ${strMovieTitle.substr(4,8)}`);
    
            console.log("\n%c=== STRING QUERY BY CHARACTER(S) ===", "color: white; background-color: green; padding: 2px");
            console.log(`Does Movie Title begin with "Th": ${strMovieTitle.startsWith("Th")}`);
            console.log(`Does Movie Title end with "VALENCE": ${strMovieTitle.endsWith("VALENCE")}`);
    
            console.log(`Does Movie Title include "Shot" anywhere? ${strMovieTitle.includes("Shot")}`);
            console.log(`Does Movie Title include "The" after position [4]: ${strMovieTitle.includes("The", 4)}`);
    
    
            console.log("\n%c=== STRING SEARCH AND REPLACE ===", "color: white; background-color: green; padding: 2px");
            let strSearch = "It was the best of times. It was the worst of times.";
            console.log(`Replaces "times" with "years": ${strSearch.replace("times", "years")}`);
            // With regular expression parameters
            console.log(`Replaces "TiMeS" with "years": ${strSearch.replace("/TiMeS/gi", "years")}`);
        </script>        
    </main>
    </body>
    </html>

Instructions for use

the web page containing the JavaScript code.
Open the page in Brave or other, lesser web browsers.
View the JavaScript output by pressing the following keys and selecting the Console tab:
- Ctrl + Shift + i (Windows)
- ⌘ Command + Shift + i (Mac).
Open the web page in VS Code, VS Code Online or Sublime Text. All are good choices.
Play around with the JavaScript code. Change things and see what happens.

✅ That’s it.