JavaScript Strings

In JavaScript, a string is a primitive data type that is used for textual data. JavaScript string must be enclosed in single quotes, double quotes, or backticks. The followings are string literals in JavaScript.

"Hello World"

'Hello World'

`Hello World`

The string literal can be assigned to a variable using the equal to = operator.

let str1 = "This is a double quoted string.";

let str2 = 'This is a single quoted string.';

let str3 = `This is a template string.`;

The template string (using backticks) is used when you want to include the value of a variable or expressions into a string. Use ${variable or expression} inside backticks as shown below.

let amount = 1000, rate = 0.05, duration = 3; 
let result = `Total Amount Payble: ${amount*(1 + rate*duration)}`;

The template string can be spanned in multiple lines which is not allowed with a single or double quoted string, as shown below.

let str1 = `This 
            is
            multi-line 
            string`;

/*let str2 = "This 
            will
            give
            error"; */

JavaScript string can be treated like a character array. You can access a character in a string using square brackets [index] or using the str.at(pos) method.

let str = 'Hello World';

let ch1 = str[0] // H
let ch2 = str[1] // e
let ch3 = str.at(2) // l
let ch4 = str.at(3) // l

str[4] = "P"; //error

JavaScript strings can be accessed using a for loop, as shown below.

let str = 'Hello World';

for(let i =0; i< str.length; i++)
  console.log(str[i]);

for(let ch of str)
    console.log(ch);

Quotes Inside String

You can include single quotes in double-quoted string or include double quotes in a single quoted string. However, you cannot include a single quotes in single quoted string and double quotes in double-quoted string.

let str1 = "This is 'simple' string";

let str2 = 'This is "simple" string';

let str3 = `This is 'simple' and "easy" string`;

If you want to include the same quotes in a string value as surrounding quotes then use a backward slash (\) before the quotation mark inside the string value.

let str1 = "This is "simple" string";

let str2 = 'This is 'simple' string';

String Concatenation

JavaScript string can be concatenated using the + operator or string.concat() method.

let str1 = 'Hello ';
let str2 = "World ";

let str3 = str1 + str2; //Hello World
let str4 = str1.concat(str2);//Hello World

String Objects

JavaScript allows you to create a string object using the new keyword, as shown below.

let str1 = new String(); //create string object
str1 = 'Hello World'; //assign value

// or 

let str2 = new String('Hello World'); //create and assign value

String objects and string literals are different. The typeof() method will return the type of a variable. The following distinguished string and string objects.

let str1 = new String('Hello World');
let str2 = "Hello World";

typeof(str1); //"object"
typeof(str2); //"string"

Strings Comparison

Two strings can be compared using <, >, ==, === operator, and string.localeCompare(string) method.

The mathematical operators < and > compare two strings and return a boolean (true or false) based on the order of the characters in the string.

The == operator compares the content of strings and === compares the reference equality of strings. The localeCompare() method compares two strings in the current locale. It returns 0 if strings are equal, else returns 1.

console.log("a" < "b"); //true
console.log("b" < "a"); //false
console.log("Apple" == "Apple"); //true
console.log("Apple" == "apple"); //false
console.log("Apple" === "Apple"); //true
console.log("Apple" === "apple"); //false
console.log("Apple".localeCompare("Apple")); //0
console.log("Apple".localeCompare("apple")); //1

Note that the === operator compares the reference of strings objects and not the values.

let str1 = "Hello";
let str2 = 'Hello';
let str3 = new String('Hello');

console.log(str1 == str2); //true
console.log(str1 === str2);//true
console.log(str1 == str3); //true
console.log(str1 === str3);//false

JavaScript String Methods & Properties

JavaScript string (primitive or String object) includes default properties and methods which you can use for different purposes.

String Properties

String Methods

String Methods for Html

The following string methods convert the string as a HTML wrapper element.