Stage 3: Welcome to JavaScript
String and Common String Methods & Template strings
  • String and Common String Methods & Template strings

    Strings are an important data type in JavaScript, used to represent text values. In this section, we'll look at common string methods and the use of template strings. Creating Strings: Strings can be created using single or double quotes, or backticks for template strings:

    let greeting = 'Hello';
    let message = 'How are you?';
    let name = `John`;

    Common String Methods: JavaScript provides a number of methods for working with strings:

    1. length: Returns the length of the string.
    let greeting = 'Hello';
    console.log(greeting.length); // 5
    1. indexOf: Returns the index of the first occurrence of a substring.
    let message = 'How are you?';
    console.log(message.indexOf('are')); // 4
    1. slice: Returns a substring from a given start index to an end index (optional).
    let name = 'John';
    console.log(name.slice(0, 2)); // 'Jo'
    1. toUpperCase/toLowerCase: Returns a new string with all uppercase or lowercase characters.
    let message = 'How are you?';
    console.log(message.toUpperCase()); // "HOW ARE YOU?"
    console.log(message.toLowerCase()); // "how are you?"
    1. replace: Replaces a specified substring with a new string.
    let message = 'Hello, how are you?';
    console.log(message.replace('Hello', 'Hi')); // "Hi, how are you?"
    1. split: Splits a string into an array of substrings based on a specified separator.
    let message = 'The quick brown fox jumps over the lazy dog';
    let words = message.split(' ');
    console.log(words); // ["The", "quick", "brown", "fox", "jumps", "over", "the", "lazy", "dog"]
    1. trim: Removes whitespace from both ends of a string.
    let message = '   Hello, World!   ';
    console.log(message.trim()); // "Hello, World!"
    1. concat: Joins two or more strings together.
    let str1 = 'Hello';
    let str2 = 'World';
    console.log(str1.concat(', ', str2, '!')); // "Hello, World!"
    1. charAt: Returns the character at a specified index in a string.
    let message = 'Hello, World!';
    console.log(message.charAt(7)); // "W"
    1. startsWith/endsWith: Returns true if a string starts or ends with a specified substring.
    let message = 'Hello, World!';
    console.log(message.startsWith('Hello')); // true
    console.log(message.endsWith('World!')); // true

    Template Strings: Template strings are a new feature in ES6 that allow for more expressive string formatting. They are created using backticks instead of quotes, and allow for embedded expressions using ${}:

    let name = 'John';
    let greeting = `Hello ${name}`;
    console.log(greeting); // "Hello John"

    Template strings can also span multiple lines:

    let message = `This is a
    multi-line
    string`;
    console.log(message); // "This is a\nmulti-line\nstring"

Video: "JavaScript Strings" https://www.youtube.com/watch?v=09BwruU4kiY&t=1s (opens in a new tab)

Article: "String" https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String (opens in a new tab)