Javascript String : Complete Guide

In this tutorial, you are going to learn about string in javascript, different ways to create it, its use, and some of the methods available to manipulate it.

Javascript String

Javascript string is a sequence of characters. It can be used to represent text, numbers, and other information. Example "Hello World", "1234", "true", "null", etc.

In HTML, it is also used to store the value of an element's attribute. For example, the src attribute of an img element can be used to store the URL of the image.

Creating a string

A string can be created by using string literals or by using a String() constructor.

# String literal

It is the simplest way to create a string. Enclose the text content in single quotes ('), double quotes ("), or backticks (`).

// String literal
// Single quotes
var str1 = 'Hello World';
console.log(str1);

// Double quotes
var str2 = "Hello World";
console.log(str2);

// Backticks
var str3 = `Hello World`;
console.log(str3);

// Checking the type of variable
console.log(typeof str1, typeof str2, typeof str3);

# String constructor

It is also possible to create a string object using the String() constructor. It is used to create a string object. It takes one argument, which is converted to a string.

// String constructor
// String object
var str = String('Hello World');

console.log(str);

// Checking the type of variable
console.log(typeof str);

Javascript String Format

String formatting is a way to format a string using placeholders. It is used to insert values into a string.

Backticks allow us to format a string and embed any javascript expression into the javascript string, by wrapping it in ${...}.

Expression inside ${...} will be evaluated and output will be returned. Example : `1 + 1 = ${1+1}` will output '1 + 1 = 2'.

// expression within backticks
var valueOfPI = `Value of PI = ${Math.PI}.`;
console.log(valueOfPI);

var sum = `10 + 15 = ${10 + 15}`;
console.log(sum);

var multiplication = `20 * 12 = ${20 * 12}`;
console.log(multiplication);

Not only mathematical expression can be used in backticks, but also variables, functions, and any valid javascript expression can be used.

// variable in backticks
var name = 'John';
var greeting = `Hello ${name}`;
console.log(greeting);

var age = 30;
console.log(`${name} is ${age > 40 ? 'old' : 'young'}`);

Multiline String

A multiline string is a string that spans multiple lines.

The easiest way to create a multiline string is by using backticks.

var webStack = `Languages:
  * HTML
  * CSS
  * Javascript`;
console.log(webStack);

You can also use quotes to create a multi-line string by adding \ (backslash) before the line break.

var webStack = "Languages: \
  * HTML \
  * CSS \
  * Javascript";

console.log(webStack);

Length Of String In Javascript

In javascript, String has many properties and predefined methods. We will learn about string methods in the coming chapter.

To get the length of a string we have a property called length. It returns the number of characters in the string.

var alphabets = "abcdefghijklmnopqrstuvwxyz";

// using length property
var length1 = alphabets.length; // output: 26
console.log(length1);

// Multi line String
var multiLine = `
  Hello
  World`;

var length2 = multiLine.length; // output: 16
console.log(length2); // 10 charaters, 4 spaces and 2 new lines

Accessing characters in string

To access a character in a string, you can use square bracket notation just like an array. The index of the character is the position of the character in the string. The first character has index 0, the second character has index 1, and so on.

var alphabets = "abcdefghijklmnopqrstuvwxyz";

// accessing characters
var char1 = alphabets[0]; // output: 'a'
console.log(char1);

var char2 = alphabets[1]; // output: 'b'
console.log(char2);

var last = alphabets[alphabets.length - 1]; // output: 'z'
console.log(last);

Javascript String Concatenation

Concatenation is the addition of 2 or more strings into a single string.

In javascript, String can be concatenated using the + operator between two different strings.

var str1 = "Hello ";
var str2 = "world";

// concatenation
var result = str1 + str2; // Hello world

// Output
console.log(result);

When you want to assemble a string at different stages of the program into a single string then you can use the += operator.

var alphabets = '';
for (var i = 0; i < 26; i++) {
  alphabets += String.fromCharCode(i + 65);
}

// Output
console.log(alphabets);

Escape Character in Javascript

Sometimes you need to show quotes (" or ') in texts but when you write extra quotes in the string then Javascript gets confused for where the string ends.

See the example below, we want the "ocean" to be in double quotes.

The above string will be chopped at "Color of ". And will also cause an error Uncaught SyntaxError: unexpected token: identifier, because javascript identifies string end at 2nd occurrence of the double quote and the next character becomes meaningless for it.

To solve the above problem we need to escape quotes using the backslash escape character ( \ ) in the string.

var ocean = "Color of \"ocean\" is Blue.";
  
// Output
console.log(ocean);

Backslash character ( \ ) is an escape character that is used to escape the character which has a special meaning, like a single quote, double quote, backtick, etc.

In the above example, we have used the backslash character to escape the double quote character ( \" ) and the out contains double quotes.

The code \' escape single quote.

var sentence =  'Escaping 'single quotes'.';
console.log(sentence);

To escape the backslash itself, write 2 backslashes together (\\).

var sentence =  "This is how to display backslash \\ itself";
console.log(sentence);

Here are more commonly used escape characters in javascript:

Newline (\n) is an escape character is used to create a new line in the string.

var webStack = `Languages: \n* HTML  \n* CSS  \n* Javascript`;
console.log(webStack);

Using backslash in unicode characters.

var a = "\x23";
var b = "\u00A5";
console.log(a);
console.log(b);

JavaScript String Methods

JavaScript string methods are used to manipulate strings. There are many methods available in JavaScript string methods. Some of the important methods are listed below: