Strings in JavaScript

JavaScript , Sun Jan 01 2023

    In JavaScript, and in any programming language for that matter, we need a way to store text.

    In JavaScript we use strings to store text. String is nothing more than a primitive data type.

    How can we create strings in JavaScript?

    There are a few ways:

    const single = 'This is a string written inside of single quotes.';
    const double = "This is a string written inside of double quotes.";
    const backticks = `This is a string written inside of single quotes.`;

    Strings created with single and double quotes are the same. We can call them simple or basic strings. They simply represent some static textual value.

    Strings created with backticks on the other hand provide extended functionality. They are dynamic. They allow us to execute real JavaScript logic inside of them. Let me show you what I mean in an example:

    const variableName = `${2 + 2}`; // 4

    Everything that we put in between the dollar sign and curly brackets is not simply taken for granted. It is evaluated as JavaScript logic.

    Therefore, 2 + 2 returns 4, rather than the string of '2 + 2'.

    That means that we can also make function calls inside of backticks string, for example:

    const sum = (a,b) => a + b;
    const total = 'The sum is ${sum(2,2)}'; // The sum is 4

    Backtick strings have one extra feature. We can span them across multiple lines.

    const numbers = `
    1
    2
    3
    `

    If we tried doing this with basic single or double quote strings, we would get an error.

    Let me ask you one question, how would the value of the following string look like?

    const greeting = 'Hi, I'm John';

    This would produce an error. In here, with a single quote after the I, we actually end the string. And JavaScript doesn't know how to evaluate the rest of the code.

    One way to fix this would simply be to use different type of quotes. For example:

    const greeting = "Hi, I'm John";

    But this is not a solution. Imagine if we had both types of the strings in the sentence:

    const greeting = "Hi, I'm John, "Doe".";

    This would, again, break.

    There's something called an "escape character", which allows us to treat special characters like normal letters. This is how we can escape the single and double quotes.

    const greeting = 'Hi, I\'m John, \"Doe\".';

    But this is getting messy. We still have "cool" strings at our disposal, right? Let's use them.

    const greeting = `Hi, I'm John, "Doe".`;

    This way, we can write the string however we want. Great!

    String Escape Characters

    • \' Single quote
    • \" Double quote
    • \\ Backslash
    • \b Backspace
    • \f Form feed
    • \n New line
    • \r Carriage return
    • \t Horizontal tabulator
    • \v Vertical Tabulator

    String length and basic properties

    One thing that we often want to know when it comes to strings is its lenght.

    You might think that we need to do some complex stuff to come to that value. Like loop through all the characters, count them and then display the value. It's so much simpler than that!

    const name = 'John';
    name.length // 4

    Another thing we might want to do often is get the element at a certain position of the string. We can do it really easily as well.

    This is how we would get the first letter of a string:

    name.[0] // j

    ... and this is how we would get the last letter:

    name.[name.length - 1] // n

    Let's inspect this line for a moment.

    name.length is equal to 4 and 4 minus 1 is 3

    name of 3 is the last letter, because we start from 0 and not from 1. For the reason that strings start from 0, we need to do it like this.

    ... and in the same fashion, we can get any character in the string

    name.[2] //h

    Great! In this part, we learned how to get a length of the strings using the length property, as well as how to get certain characters of a string!

    Now let's learn how we can change the case of the string!

    Change string case

    In this video, we're going to learn how we can change the case of a string. What is the case? You have definitely heard about upperCASE and lowerCASE letters. That's it!

    In JavaScript, we have only two, really simple and straight forward methods for changing the character case, and they are:

    • string.toLowerCase()
    • string.toUpperCase()

    Let's show this in an example:

    const string = 'Hello!, How are you James?';

    string.toLowerCase(); // "hello, how are you james?"
    string.toUpperCase(); // "HELLO, HOW ARE YOU JAMES?"

    Notice how we have parentheses on these two. That's because they are functions, more precisely: methods we call on a string.

    Let's learn more useful string methods!

    Searching for a Substring

    There are multiple ways to look for a substring within a string.

    str.indexOf()

    The first method is str.indexOf(substr, pos).

    It looks for the substr in str, starting from the given position pos, and returns the position where the match was found or -1 if nothing can be found.

    For instance:

    const string = 'I love ducks, he said, ducks are great!';
    string.indexOf('ducks'); // 7
    string.indexOf('Ducks'); // -1

    The optional second parameter allows us to search starting from the given position.

    For instance, the first occurrence of 'ducks' is at position 7. To look for the next occurrence, let's start the search frome position 8:

    string.indexOf('ducks',8); // 23

    str.lastIndexOf()

    str.lastIndexOf(substr, position)

    There is also a similar method str.lastIndexOf(substr, position) that searches from the end of a string to its beginning.

    Great! Now you can use indexOf methods if you need to find the exact position of some substrings in a string.

    includes()

    But much more often, you're just interested if a string contains something, and you're not concerned where is it in the string.

    For these cases you can use string.includes()

    It simply returns true or false.

    It's the right choice if we need to test for the match, but don't need its position:

    const string = 'I love ducks, he said, ducks are great!';
    string.includes('ducks'); // true

    As with the indexOf method, he optional second argument of str.includes is the position to start searching from.

    str.startsWith() and str.endsWith()

    The methods str.startsWith and str.endsWith do exactly what they say:

    string.startsWith('I'); //true
    string.endsWith('ducks'); //false

    The best method for getting a substring of a string is str.slice().

    Let's show it on an example:

    str.slice(start [, end])

    Returns the part of the string from start to (but not including) end.For instance:

    const exampleString = 'hotdog';
    example.slice(3,6); // dog

    Some times, we might want to split the string into multiple substrings. For that we'll be using a string method called split().

    Let me give you some examples:

    This is how we can split a word into characters:

    const exampleString = 'dog';
    console.log(exampleString.split(''));

    Notice how we passed an empty string as a first parameter of a split method.

    This is how we can split a sentence into words:

    const string = 'The quick brown fox jumps over the lazy dog.';
    console.log(string.split( ));

    The result of both examples is an... array!

    Exactly.

    Reverse a string

    REVERSE

    There isn't a built in string method that reverses a string. Rather, we can use the knowledge we previously gained! Remember how we can split a string into array of characters? Arrays do have a reverse method.

    So this is a process.

    • Split a string
    • Reverse newly created a array
    • Turn the array back into string using join()

    const str = 'test'; str.split('').reverse().join(''); // tset

    Repeat and trim a string

    REPEAT

    Let's say that you want to repeat a string an x number of times. You can easily do that by using the string.repeat() method.

    const dogSays = 'woof';
    console.log(dogSays.repeat(4)); // woofwoofwoofwoof

    TRIM

    Sometimes, users don't know how to type. And we need to clean their emails, usernames & whatnot. We can clean empty spaces using trim

    const str = " Hello World! ";
    console.log(str.trim()); // "Hello World!"

    Array Methods

    • string[index]: get a certain character of a string
    • string.length: return the number of characters in a string
    • string.split(' '): returns an array of words of a string
    • string.split(''): returns an array of characters of a string
    • string.toLowerCase(): returns a lowercased string
    • string.toUpperCase(): returns an uppercased string
    • string.charAt(index): returns a new string consisting of the single character located at the specified offset into the string.
    • string.replace(substr, newSubstr): returns a new string with a substring (substr) replaced by a new one (newSubstr).
    • string.includes(searchString): performs a case-sensitive search to determine whether one string may be found within another string, returns true or false.
    • string.substr(start, length): returns a portion of the string, starting at the specified index and extending for a given number.
    • string.includes('subtring'): checks whether a substring exists inside of a string [check the character case]
    • string.indexOf(searchValue): returns the index of the first occurrence of the specified value, starting the search at fromIndex. Returns -1 if the value is not found.
    • string.lastIndexOf(searchValue): returns the index of the last occurrence of the specified value, searching backwards from fromIndex. Returns -1 if the value is not found.
    • string.slice(beginIndex, endIndex): extracts a section of a string and returns it as a new string, without modifying the original string.