Prev Next

JavaScript Strings

Strings in JavaScript represent text. They are created using quotes and can contain letters, numbers, and special characters. Understanding how to work with strings is essential for handling textual data and user input.

Key Topics

Defining Strings

Strings can be defined using single quotes, double quotes, or template literals (`). Template literals allow for easier string interpolation.

let single = 'Hello';
let double = "World";
let combined = `${single}, ${double}!`;
console.log(combined);

Output

> Hello, World!

Explanation: Template literals (`${...}`) make it easy to insert variables and expressions into strings without manual concatenation.

String Length

The .length property returns the number of characters in a string, including spaces and punctuation.

let text = "JavaScript";
console.log("Length: ", text.length);

Output

> Length: 10

Explanation: The word "JavaScript" has 10 characters, so text.length returns 10.

Escape Characters

Escape characters (like \n for newline or \" for quotes) allow you to include special characters inside strings without breaking the syntax.

let message = "He said: \"JavaScript is fun!\"";
console.log(message);

Output

> He said: "JavaScript is fun!"

Explanation: The escape character \ before the quotes ensures they are interpreted as part of the string, not as the string delimiter.

JavaScript Usage in DOM

This DOM-based example shows how strings can be used to update webpage content dynamically.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Strings in DOM</title>
</head>
<body>
    <h1>String Demo</h1>
    <button onclick="showMessage()">Show Message</button>
    <p id="display"></p>

    <script>
        function showMessage() {
            let greeting = "Hello, welcome to our site!";
            document.getElementById("display").textContent = greeting;
        }
    </script>
</body>
</html>

Key Takeaways

  • Defining Strings: Use single, double quotes, or template literals.
  • Length Property: length returns the number of characters.
  • Escape Characters: Insert special characters like quotes or newlines.
  • DOM Integration: Dynamically update text on webpages using strings.
Prev Next