JavaScript for Noobs: Basic String Manipulation

February 6, 2020
javascript for noobs

Hello and welcome to my first blog episode of JavaScript for Noobs, where we learn JavaScript step by step and become JavaScript pros! Here, we start with basic string manipulation. Some introduction. I am currently learning JavaScript through Udemy and I’m here to share what I learn as I go along. The Udemy course takes 52 hours (it’s a complete, full stack web development course) and video learning might not be your cup of tea if you are here, reading this blog. But for reference, here it is: The Complete 2020 Web Development Bootcamp.

In this lesson, we will learn 4 basic ways to manipulate string using JavaScript: string concatenation (combine or separate strings), determining character count (or length of string), dissecting string (cutting into parts or slicing), and changing text case. By completing this lesson, you are one step away from leaving the domain of JavaScript for Noobs.

Before that, however, let me show you a quick way to write and test simple JavaScript code straight from your Chrome browser. If you are on Windows, hit CTRL + SHIFT + J (or CTRL + OPTION + J for mac) to open the developer tools. By default you will get to the Console. Go to Sources, and look for Snippets in the sidebar.

javascript for noobs: dev tools console on Chrome

#1 String Concatenation

Concatenation is combining or connecting things together to create something. In the case of string, it is to connect characters together and make them one. Here is an example: “Hello” + “world” = “Hello World.” To do that with JavaScript, simply follow the same structure.

var string1 = "Hello";
var string2 = "world";
var concatenatedString = string1 + " " + string2;

The above snippet gives you a “Hello world” output. Take note that the space was added after we put an empty space between string1 and string2. Without it, the output would be “Helloworld” – the result of concatenating “Hello” and “world.”

#2 Determine Character Count

Next, we learn how to determine the length of a string. This is easily accomplished by using stringName.length where length is the function that counts each character of the string and numbers each. The first character is 0, the second is 1 and so on. Here is an example.

var string1 = "Hello";

By running the above snippet, you will find the length of the string (the number of characters counted) in the console log. What will you use this for? Take for example, Twitter. Consider how it limits the number of characters you can tweet. That’s right. Determining the character count makes it possible for Twitter to limit tweets to a certain number of characters.

twitter character count

#3 Slicing String Into Parts

We already learned how to connect strings into one (concatenation), now we will learn how to separate a string into parts with slice. It works almost the same as length. Except, slice requires parameters (or user input) to determine the length of the string we want to slice and separate from the main string.

var string1 = "Hello";

The output of above’s snippet will give us “H.” Here’s why. Slice requires at least one parameter which is the starting point of the slice. This is the character number where the slicing starts. In our example, I wrote 0 which is “H.” The second parameter is optional, but it determines where to end the slice. I wrote 1 which is at “e” but “e” is not included in the actual slice because the second parameter only determines the ending point of the slice but is not actually included in the slice. Suffice to say, if we do not specify the second parameter, there is no end point and the slice takes the rest of the string from the starting point (first parameter).

#4 Changing Text Case

Here’s an easy one. JavaScript lets us turn any string to all uppercase or all lower case by using the functions toUpperCase() and toLowerCase(). It’s the same usage as all the other functions we’ve used so far.

var string1 = "Hello";

By running the snippet above, you will have “HELLO” on your console if you used toUpperCase() or “hello” if you used toLowerCase().

That’s all for today’s class. If you have any questions, raise your hands and type them in the comment section below. I’ll see you all again for another blog episode of JavaScript for Noobs. In the meantime, check out my JavaScript hack without JavaScript.

You Might Also Like

Notify of
Inline Feedbacks
View all comments