Bite-sized JavaScript: Strings and its methods

In JavaScript, a string is a sequence of characters enclosed in quotes, either single ('') or double (""). Strings are one of the most commonly used data types in JavaScript and are used to represent text-based data. In this blog, we will cover the basic concepts of JavaScript strings and provide some examples to demonstrate how to work with them.

Creating a String:

In JavaScript, a string can be created by enclosing text in quotes. For example:

let str1 = "Hello, World!"; // using double quotes
let str2 = 'Hello, World!'; // using single quotes

Both str1 and str2 will be assigned the same string value.

String Methods

JavaScript provides a number of built-in methods that can be used to manipulate strings. Here are some of the most commonly used methods:

length

The length property returns the number of characters in a string.

let str = "Hello, World!";
console.log(str.length); // output: 13

indexOf

The indexOf method returns the index of the first occurrence of a specified substring in a string. If the substring is not found, it returns -1.

let str = "Hello, World!";
console.log(str.indexOf("World")); // output: 7

slice

The slice method returns a new string that contains a portion of the original string. It takes two arguments: the starting index and the ending index (which is not included in the new string).

let str = "Hello, World!";
console.log(str.slice(0, 5)); // output: Hello

toUpperCase and toLowerCase

The toUpperCase and toLowerCase methods return a new string with all characters in uppercase or lowercase, respectively.

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

trim

The trim method removes whitespace from both ends of a string.

let str = "   Hello, World!   ";
console.log(str.trim()); // output: Hello, World!

String Concatenation

In JavaScript, you can concatenate two or more strings using the + operator. For example:

let str1 = "Hello,";
let str2 = "World!";
let str3 = str1 + " " + str2;
console.log(str3); // output: Hello, World!

You can also use the += operator to concatenate strings. For example:

let str1 = "Hello,";
let str2 = "World!";
str1 += " " + str2;
console.log(str1); // output: Hello, World!

String Template Literals

Template literals are a new feature in JavaScript that allows you to embed expressions inside a string, using backticks (`) instead of quotes. This makes it easier to concatenate variables and strings, and also allows for multi-line strings.

let name = "Alice";
let age = 30;
let message = `My name is ${name} and I am ${age} years old.`;
console.log(message);
// output: My name is Alice and I am 30 years old.

JavaScript strings are a fundamental data type that are used to represent text-based data. They can be manipulated using a variety of built-in methods, and can be concatenated using the + and += operators. The introduction of template literals makes it easier to work with strings in JavaScript, allowing you to embed expressions and use multi-line strings. By understanding the basics of JavaScript strings and their methods, you can create more powerful and flexible JavaScript applications.

About the author

Joff Tiquez, hailing from Manila, Philippines, is the individual behind the establishment of OSSPH. He is a web developer who strongly supports open source and has been overseeing projects like Vue Stripe for an extended period. To get in touch with Joff, you can visit https://bento.me/jofftiquez.