Web Development - JavaScript Strings
JavaScript Strings
Strings are used to store text.
You can create strings using single or double quotes. Both work the same way.
Example
Create strings with different quotes:
let name1 = "Bo";
let name2 = 'John';
let text = name1 + " and " + name2 + " are learning JavaScript.";
document.getElementById("demo").innerHTML = text;
Try it Yourself »
Single and double quotes can be used freely - just make sure they match.
Quotes Inside Strings
If you need quotes inside a string, use one type inside the other.
Example
Quotes inside a string:
let text1 = "It's a beautiful day!";
let text2 = 'He said "Hello!"';
document.getElementById("demo").innerHTML = text1 + "<br>" + text2;
Try it Yourself »
Use single quotes around double quotes, or double quotes around single quotes.
String Length
The length property tells you how many characters are in a string.
Example
Find the length of a string:
let text = "JavaScript";
let len = text.length;
document.getElementById("demo").innerHTML = len;
Try it Yourself »
Here, "JavaScript" has 10 characters.
Combining Strings
You can join strings together using the + operator.
Example
Combine two strings:
let firstName = "Bo";
let lastName = "Refs";
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
Try it Yourself »
The + operator joins text together.
You can also use += to add to an existing string.
Template Strings
Template strings (or template literals) make combining text easier.
They use backticks `` instead of quotes.
Example
Use backticks and ${} to insert variables:
let name = "Bo";
let age = 25;
let text = `My name is ${name}, and I am ${age} years old.`;
document.getElementById("demo").innerHTML = text;
Try it Yourself »
Template strings are easier to read and write than using +.
String Methods
Strings have built-in methods to help you work with text.
| Method | Description | Example |
|---|---|---|
toUpperCase() | Converts to uppercase | text.toUpperCase() |
toLowerCase() | Converts to lowercase | text.toLowerCase() |
indexOf() | Finds the position of text | text.indexOf("a") |
slice() | Extracts part of a string | text.slice(0, 4) |
Example
Use string methods:
let text = "JavaScript";
let result = text.toUpperCase() + "<br>" + text.slice(0, 4);
document.getElementById("demo").innerHTML = result;
Try it Yourself »
This example changes the string to uppercase and then shows the first four letters.
Tip: For a list of all available String methods, see our JavaScript String Reference.
Escape Characters
Some characters can't be typed directly into strings.
Use a backslash (\) to "escape" them.
| Code | Result |
|---|---|
\' | Single quote |
\" | Double quote |
\\ | Backslash |
\n | New line |
Example
Using escape characters:
let text = 'It\'s easy to learn JavaScript!';
document.getElementById("demo").innerHTML = text;
Try it Yourself »
The backslash allows you to use special characters safely inside strings.
Summary
- Strings hold text inside quotes.
- Use
lengthto count characters. - Join strings with
+or backticks (``). - String methods like
toUpperCase()andslice()help manipulate text. - Escape characters let you use quotes and new lines inside strings.
Next, you'll learn how to work with Arrays - a way to store multiple values in one variable.
