JavaScript String

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

Get String Length

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
Insert a quote inside another quote.

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'.';
JavaScript String Objects

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.

Convert to String

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.

JavaScript Escape Characters

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 Multiline Strings

JavaScript provides multiple techniques to create multiline strings. They can be broadly classified into two types:

  1. Multiline in code but not in the output.
  2. 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:

Before we wrap up, let’s put your knowledge of JavaScript String to the test! Can you solve the following challenge?

Challenge:

Write a function to concatenate two strings.

  • Given two input strings (str1 and str2), return the concatenated string.
  • For example, if str1 = "Hello, " and str2 = "World!", the expected output is "Hello, World!".
Did you find this article helpful?

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges