The JavaScript string is a primitive data type that represents textual data. For example,
let name = "John";
Create JavaScript Strings
In JavaScript, we create strings by surrounding them with quotes or backticks.
| Single Quotes | 'Hello' |
| Double Quotes | "Hello" |
| Backticks | `Hello` |
Single quotes and double quotes are practically the same, and you can use either of the two.
Backticks are generally used when you need to insert variables or expressions into a string. This is done by wrapping variables or expressions with ${variable or expression}. For example,
// strings example
let name1 = 'Peter';
let name2 = "Jack";
let result = `The names are ${name1} and ${name2}`;
console.log(result);
// Output: The names are Peter and Jack
Note: In JavaScript, strings enclosed by backticks ` ` are called template literals.
Access String Characters
You can access the characters in a string in two ways:
1. Using Indexes
One way is to treat strings as an array and access the character at the specified index. For example,
let message = "hello";
// use index 1 to access
// 2nd character of message
console.log(message[1]); // e
Here, the code message[1] gives us the character at index 1 of the message string, i.e., its second character.
2. Using the charAt() Method
Another way is to supply the position of the character to the charAt() method. For example,
let message = "hello";
// use charAt(1) to get the
// 2nd character of message
console.log(message.charAt(1)); // e
Here, the code message.charAt(1) gives us the character at index 1 of the message string.
Features of JavaScript Strings
JavaScript strings have some interesting features. The most important of these features are:
1. JavaScript Strings are Immutable
In JavaScript, the characters of a string cannot be changed. For example,
let message = "hello";
message[0] = "H";
console.log(message); // hello
In the above example, we tried changing the first character of message using the code:
message[0] = "H";
However, this operation failed due to the immutable nature of JavaScript strings.
That being said, you can successfully assign a new value to the string variable. For example,
let message = "hello";
message = "Hello";
console.log(message); // Hello
2. JavaScript Strings are Case-Sensitive
In JavaScript., the lowercase and uppercase letters are treated as different values. For example,
let value1 = "a";
let value2 = "A"
console.log(value1 == value2); // false
As you can see, a and A are treated as different values.
JavaScript String Methods
| Method | Description |
|---|---|
| charAt() | Returns the character at the specified index. |
| concat() | Joins two or more strings. |
| replace() | Replace a string with another string. |
| split() | Converts the string to an array of strings. |
| substr() | Returns a part of a string by taking the starting position and length of the substring. |
| substring() | Returns a part of the string from the specified start index (inclusive) to the end index (exclusive). |
| slice() | Returns a part of the string from the specified start index (inclusive) to the end index (exclusive). |
| toLowerCase() | Returns the passed string in lowercase. |
| toUpperCase() | Returns the passed string in uppercase. |
| trim() | Removes whitespace from the strings. |
| includes() | Searches for a string and returns a boolean value. |
| search() | Searches for a string and returns the position of a match. |
To learn more, visit JavaScript String methods.
Example: JavaScript String Methods
let text1 = "hello";
let text2 = "world";
let text3 = " JavaScript ";
// concatenate two strings
let result1 = text1.concat(' ', text2);
console.log(result1); // hello world
// convert the text to uppercase
let result2 = text1.toUpperCase();
console.log(result2); // HELLO
// remove whitespace from the string
let result3 = text3.trim();
console.log(result3); // JavaScript
// convert the string to an array
let result4 = text1.split();
console.log(result4); // [ 'hello' ]
// slice the string
let result5= text1.slice(1, 3);
console.log(result5); // el
Output
hello world HELLO JavaScript [ 'hello' ] el
More on JavaScript Strings
To find the length of a string, you can use the built-in length property. For example,
let message = "hello";
console.log(message.length);
// Output: 5
You can write a quote inside another quote. However, the quote should not match the surrounding quotes. For example,
// valid
let message = 'My name is "Peter".';
// invalid
let message = 'My name is 'Peter'.';
You can create string objects using the new keyword. For example,
let value1 = "hello";
let value2 = new String("hello");
console.log(value1); // hello
console.log(value2); // [String: 'hello']
console.log(typeof(value1)); // string
console.log(typeof(value2)); // object
Note: We recommend you avoid using string objects since they slow down the program.
We use the String() function to convert various data types to strings. For example,
let value1 = 225; // number
let value2 = true; // boolean
//convert to string
let result1 = String(value1);
let result2 = String(value2);
console.log(result1); // 225
console.log(result2); // true
To learn more about string conversion, visit JavaScript Type Conversion.
In JavaScript, you use escape characters to insert characters that are difficult or impossible to represent directly in a string.
You can use the backslash escape character \ to include special characters in your string. For example,
// insert double quotes inside string
let name = "My name is \"Peter\".";
console.log(name);
Output
My name is "Peter".
In the above program, each \" inserts a double quote inside the string without causing syntax errors.
Here are other ways that you can use escape character \:
| Code | Character |
|---|---|
\" |
Double Quote |
\\ |
Backslash |
\n |
New Line |
\r |
Carriage Return |
\v |
Vertical Tab |
\t |
Horizontal Tab |
\b |
Backspace |
\f |
Form feed |
JavaScript provides multiple techniques to create multiline strings. They can be broadly classified into two types:
- Multiline in code but not in the output.
- Multiline in both code and output.
Let's explore them in greater detail:
1. Multiline in code but not in the output.
Separating a long string into multiple lines can make your code look clean. You can achieve this using the + or the \ operators.
However, these multiline strings will be represented as a single line in the output. For example,
// use the + operator
let message1 = "This is a long message " +
"that spans across multiple lines " +
"in the code.";
// use the \ operator
let message2 = "This is a long message \
that spans across multiple lines \
in the code.";
console.log(message1);
console.log(message2);
Output
This is a long message that spans across multiple lines in the code. This is a long message that spans across multiple lines in the code.
2. Multiline in both code and output.
Use any of the following to print multiple lines using a single string variable:
- Template Literals
` ` - Newline Escape Character
\n
For example,
// use template literal
let message1 = `This is a long message
that spans across multiple lines
in the code.`;
// use escape character \n
// each \n inserts a new line into the string
let message2 = "This is a long message\nthat spans across multiple lines\nin the code.";
console.log(message1);
// print an empty line
console.log();
console.log(message2);
Output
This is a long message that spans across multiple lines in the code. This is a long message that spans across multiple lines in the code.
Also Read: