In JavaScript, strings are used to represent and manipulate text. A string is a sequence of characters enclosed in single quotes (' '), double quotes (" "), or backticks (`). Strings are immutable, meaning once a string is created, it cannot be changed. However, you can create new strings based on operations performed on existing strings.

Creating Strings

You can create strings in several ways:

  1. Using Single Quotes:

      let singleQuoteString = 'Hello, World!';

  2. Using Double Quotes:

      let doubleQuoteString = "Hello, World!";

  3. Using Backticks (Template Literals):

      let templateLiteralString = `Hello, World!`;

Common String Methods

JavaScript provides various methods to manipulate and work with strings. Here are some commonly used methods:

  1. Concatenation:

      let string1 = 'Hello';
let string2 = 'World';
let concatenatedString = string1 + ', ' + string2 + '!';
console.log(concatenatedString); // Outputs: "Hello, World!"

  2. Length:

      let string = 'Hello, World!';
console.log(string.length); // Outputs: 13

  3. Accessing Characters:

      let string = 'Hello, World!';
console.log(string[0]); // Outputs: "H"
console.log(string.charAt(0)); // Outputs: "H"

  4. Substring:

      let string = 'Hello, World!';
let substring = string.substring(0, 5);
console.log(substring); // Outputs: "Hello"

  5. Split:

      let string = 'Hello, World!';
let splitArray = string.split(', ');
console.log(splitArray); // Outputs: ["Hello", "World!"]

  6. Replace:

      let string = 'Hello, World!';
let newString = string.replace('World', 'JavaScript');
console.log(newString); // Outputs: "Hello, JavaScript!"

  7. Uppercase and Lowercase:

      let string = 'Hello, World!';
console.log(string.toUpperCase()); // Outputs: "HELLO, WORLD!"
console.log(string.toLowerCase()); // Outputs: "hello, world!"

Template Literals

Template literals, introduced in ES6, provide a more powerful way to create and work with strings. They allow for embedding expressions, multi-line strings, and more:

  1. Embedding Expressions:

      let name = 'World';
let greeting = `Hello, ${name}!`;
console.log(greeting); // Outputs: "Hello, World!"

  2. Multi-line Strings:

      let multiLineString = `This is
a multi-line
string.`;
console.log(multiLineString);
// Outputs:
// This is
// a multi-line
// string.

Example in HTML with JavaScript

Here’s an example demonstrating the use of various string methods in JavaScript within an HTML file:

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Strings Example</title>
</head>
<body>
    <h1>JavaScript Strings Example</h1>
    <p id="result"></p>

    <script type="text/javascript">
        let singleQuoteString = 'Hello, World!';
        let doubleQuoteString = "Hello, World!";
        let templateLiteralString = `Hello, World!`;

        let concatenatedString = singleQuoteString + ' ' + doubleQuoteString;
        let stringLength = singleQuoteString.length;
        let firstCharacter = singleQuoteString[0];
        let substring = singleQuoteString.substring(0, 5);
        let splitArray = singleQuoteString.split(', ');
        let replacedString = singleQuoteString.replace('World', 'JavaScript');
        let upperCaseString = singleQuoteString.toUpperCase();
        let lowerCaseString = singleQuoteString.toLowerCase();

        let name = 'JavaScript';
        let greeting = `Hello, ${name}!`;
        let multiLineString = `This is
        a multi-line
        string.`;

        document.getElementById('result').textContent = `
            Concatenated String: ${concatenatedString}\n
            String Length: ${stringLength}\n
            First Character: ${firstCharacter}\n
            Substring: ${substring}\n
            Split Array: ${splitArray}\n
            Replaced String: ${replacedString}\n
            Uppercase String: ${upperCaseString}\n
            Lowercase String: ${lowerCaseString}\n
            Greeting: ${greeting}\n
            Multi-line String: ${multiLineString}
        `;
    </script>
</body>
</html>