What is a String in JS?

A string represents a sequence of characters (letters, numbers, symbols, etc.). They are immutable, which means they cannot be changed after they are created. Strings are incredibly useful for storing and manipulating text data in an application.

How to create a string

Creating a string in JS is very straightforward. You simply declare a variable (either const, let, or var, learn more about the difference here), give the string a name, and then assign the string to the variable.

In this tutorial, we will use const to declare the variable.

1const method1 = 'Hello, world!';
2const method2 = "Hello, world!";
3const method3 = `Hello, world!`;

So, what's the difference between the three methods? Well, the first two methods are essentially the same. They both create a string using the same syntax. The only difference is that the first method uses single quotes and the second method uses double quotes.

The third method is a bit different. It uses backticks (``) to create a string. Backticks allow you to embed variables directly within the string using template literals. For example:

1const name = "John";
2const greeting = `Hello, ${name}!`; // "Hello, John!"

This is called string interpolation, learn more about it here.

String Concatenation in JavaScript

String concatenation is the process of combining two or more strings into a single string. In JavaScript, you can use the + operator to concatenate strings.

1const firstName = "John";
2const lastName = "Doe";
3const fullName = firstName + " " + lastName; // "John Doe"
4
5// output: "John Doe"

You can also use the concat method to concatenate strings, this method is more readable and flexible than the + operator.

1const firstName = "John";
2const lastName = "Doe";
3const fullName = firstName.concat(" ", lastName); // "John Doe"
4
5// output: "John Doe"

String manipulation in JavaScript

String manipulation is the process of changing the content of a string. In JavaScript, you can use various methods to manipulate strings.

Get the length of a string

To get the length of a string, you can use the length property. This will return how many characters are present in a given string.

1const message = "Hello, world!";
2const length = message.length; // 13
3
4// output: 13

Adding Apostrophes in Strings

Apostrophes can cause issues when writing strings in JS. For example, if you want to write 'I don't know' in a string, you can't use an apostrophe in the string because it will be interpreted as the end of the string.

1const message = 'I don't know'; // This will throw an error

There are a few ways to solve this problem. Let's look at the most common ones.

Use double quotes

1const message = "I don't know"; // This will work

In the example above, we used double quotes to create the string. This way, we can use an apostrophe in the string without it being interpreted as the end of the string.

Use backticks

We can also use backticks to create the string. This way, we can use an apostrophe in the string without it being interpreted as the end of the string.

1const message = `I don't know`; // This will work

In the example above, we used backticks to create the string. This way, we can use an apostrophe in the string without it being interpreted as the end of the string.

Using JavaScript to Turn Strings to Uppercase and Lowercase

If you need to transform a string to uppercase/lowercase not using css, you can use the toUpperCase and toLowerCase methods to turn strings to uppercase and lowercase respectively.

1const message = "Hello, world!";
2const uppercaseMessage = message.toUpperCase();
3const lowercaseMessage = message.toLowerCase();
4
5// output: "HELLO, WORLD!"
6// output: "hello, world!"

Test if a string contains a substring

You can use the includes method to test if a string contains a substring. This method will return true if the substring is present in the string and false otherwise.

1const message = "Hello, world!";
2const containsHello = message.includes("Hello");
3
4// output: true

Want to learn with real examples?

Looking to master strings in JS? Try these coding challenges to reinforce your knowledge!

Accelerate Your JavaScript Journey

Ready to master JavaScript strings and beyond? TechBlitz offers comprehensive JavaScript training with hands-on exercises, real-world projects, and expert guidance. Whether you're just starting out or looking to deepen your understanding of JavaScript concepts, our platform provides the resources you need to succeed. Join our community of developers and take your programming skills to the next level!