A quick recap

Let's start by quickly reviewing all the concepts related to strings that we've learnt thus far in this course.

First of all, here's what a string is:

A string is a sequence of textual characters.

In a program, a string is merely a piece of textual data typically denoted using a pair of single quotes ('') or a pair of double quotes ("") to distinguish it from actual code.

Here are some examples of strings:

var greeting1 = 'Hello World!';
var greeting2 = "Hello World!";

var saying = 'He said: "I love you!"';

var quote = "It's the last day to submit the project.";

The first two strings hold the exact same text, just denoted in different ways. The third string is denoted using single quotes ('') and also contains a double quote (") in the text. Similarly, the fourth string is denoted using double quotes ("") and contains a single quote (').

But what if we want both single (') and double (") quotes in the text? We'll come to this question shortly in the next section.

Each character in a string is associated with a given position, known as its index. Indexes begin at 0 and increment by 1. Therefore, the first character of a string has index 0, the second has index 1, the third has index 2, and so on and so forth.

The total number of characters in a string is referred to as its length.

The length of a string can easily be obtained by accessing its length property. Below shown are some examples:

' 1 1'.length
var str = 'Hello World!'

The length of the second last string (' 1 1') is 4. This is because spaces are also valid textual characters, and are obviously considered in the length of a given string.

Accessing a given character is also a very common operation. It's done via bracket notation whose general form is string[index], where string is the string value and index is the index of its character that we wish to access.

As before, following are a couple of examples:

var str = 'Hello World!'

To put a new line in a string, we use the sequence \n. For instance, if we want to make an alert whose message is divided into two lines, we can do something along these lines:

alert('This is an:\nAlert!');

Live Example


So this is it for our very quick recap of strings in JavaScript. Now that all this knowledge is fresh in our minds, it's time to unravel the deeper secrets to strings in the language.

Escaping characters

Let's come back to the problem of placing both single (') and double (") quotes inside a string.

As we know, if we create such a string either using a pair of single quotes ('') or a pair of double quotes (""), the similar character inside the string would come in conflict with the character used to denote the string and thus lead to an error as the following piece of text is treated as actual code.

There are essentially two ways to solve this problem in JavaScript:

  1. Escape the conflicting quote character
  2. Use a template literal

In this section, we focus on the former — escaping the conflicting quote character.

So what is meant by 'escaping'?

Escaping a character in a string means to precede it with backslash character (\) so that the parsing engine doesn't treat the character literally.

We are already familiar with escaping a character in a string from the sequence \n. Here the backslash character is placed before the character n. The consequence is that the parsing engine doesn't treat n as a literal n but rather as a new line character.

Similarly, we can precede both the single (') and double (") quote characters with a backslash, i.e. \' and \" respectively, to signal to the engine that they aren't meant to denote the end of the string.

Consider the following example:

var s = 'He said: "It\'s impossible."';
He said: "It's impossible."

Here we denote the string using single quotes (''), and then use both single and double quotes inside the string. For the double quotes, we don't use any backslashes since they obviously don't conflict with the single quote used to denote the string.

However, for the single quote, we precede it with a backslash (\). This escapes the following ' character so that it is not interpreted as the end of the string.


Let's try to denote this string using double quotes:

var s = "He said: \"It's impossible.\"";
He said: "It's impossible."

Simple, as before.

Now as you may agree, although backslashes solve such cases of character-conflict problems when denoting strings, they do complicate string expressions. The backslash characters inside the string's text seems nothing more than a mess, especially when used again and again and again.

Another way is to use a template literal. The following section expands on this idea.

Template literals

The ECMAScript 2015 specification introduced something called template literals, also known as template strings, into JavaScript. They represent an extremely simple, yet powerful idea.

A template literal, denoted using a pair of backticks (``), represents a string that could span multiple lines and contain JavaScript code.

Let's break this definition down into simpler pieces.

First off, a template literal is denoted using a pair of backtick characters (``).

Shown below are a couple of template literals:

`Hello World!`
'Hello World!'
`What's up?`
'What's up?'
`He said: "It's impossible."`
'He said: \"It's impossible.\"'

Notice the last template string in this snippet. It uses both single (') and double (") quotes in the text without any backslash (\) character. That's because the character used to denote the string is a backtick (`) which obviously doesn't conflict with either the single or double quote characters in the string's text.

This is one application of template strings — to create strings that contain both single (') and double quotes ("), without having to manually escape them.

Secondly, a template literal could span multiple lines where each line literally denotes a new line, unlike strings created using single ('') or double quotes ("") where we have to manually use the \n sequence to denote a new line.

Consider the code below:

var s = `This is line 1,
and this is line 2.`;

This is line 1,
and this is line 2.

We create a variable s and then assign a template string to it. Notice the new lines in this template string. These translate to actual new line characters in the final string.

As a rule of thumb, remember that:

The way a template literal is laid out in the source code is the same way it gets displayed when output.

If you put newlines in a template string, they would translate to actual new lines (i.e. the special character \n) in the final string. This is the reason why sometimes template literals are also called multi-line strings.

Lastly, a template literal could contains JavaScript code — or strictly speaking, valid JavaScript expressions.

There is a special notation to represent a piece of code inside a template literal, shown as follows:


We begin with the $ character, followed by a pair of curly braces {}. Inside these, we put the desired expression.

This whole ${expression} notation is replaced by the return value of expression in the final string, after the engine parses the template literal.

An example follows:

var lang = 'JavaScript';
var s = `You are learning ${lang}.`;

You are learning JavaScript.

Here, the template string contains ${lang}, which simply means that this notation would be replaced by the value of the variable lang. lang holds the string 'JavaScript', likewise s becomes 'You are learning JavaScript.'.


Why are they called 'template literals'?

The word 'template' comes from the fact that such a string denotes a template expression, that is replaced by actual stuff when parsed.

For instance, consider the string below:

`${name} is ${age} years old.`

This string is a template string in that it defines the general form of the piece of text stored in the string. ${name} is replaced by the name of an actual person, and ${age} is replaced by that person's age.

A template string is parsed by the JavaScript engine at runtime and any ${} occurrences replaced by the return values of the respective expressions.

Talking about the word 'literal', it comes from the fact that `` is a string literal — exact representation of a string in source code, just like the string literals '' and "".

Hence, the name 'template literals'.


One of the most common operations performed on strings is that of concatenation.

Concatenation is simply the joining together of two strings into one single string. In JavaScript, as we already know, string concatenation is done using the + operator.

'Hello' + ' World!'
'Hello World!'
'10' + 20
10 + '20'
'10' + '20'
10 + {}
'10[object Object]'

Now here's one catch: the same + symbol is also used as the addition operator to add numbers together and concatenate strings together. The question is how does the engine decide what to do when it encounters the + operator?

Fortunately, it's really simple.

If either of the operands of + is not a number, both the operands are converted into a string and then concatenated together. Otherwise, they are added together, as numbers.

Consider the following snippet:

10 + 20
'10' + 20
10 + '20'
'10' + '20'
10 + {}
'10[object Object]'

In the last statement here, {} is not a number and is therefore both the operands are coerced into a string. As we shall learn later on in this course, {} gets converted to the string '[object Object]', hence 10 + {} becomes '10' + '[object Object]'.

Moving on, another important thing to keep in mind when working with string concatenation is that + is left-associative in nature. That is, when there is a contiguous sequence of + operators, the leftmost operands are grouped together and thus operated first. This could sometimes lead to unexpected behavior.

For example, consider the following code:

console.log('Price: $' + 10 + 20);

Here we expect that the output produced would be Price: $30, however that's not the case. Instead, we get the following:

Price: $1020

But why?

That's just because + is left-associative. The expression above is evaluated as follows: ('Price: $' + 10) + 20. The leftmost + is resolved first to give 'Price: $10'.

Next up, the expression becomes 'Price: $10' + 20, which evaluates down to 'Price: $1020'.

Had + been right-associative, the expression would've been evaluated as 'Price $:' + (10 + 10), giving us the correct result. However, clearly, that's not the case.

If we want to achieve the expected output in the code above, we ought to manually group the arithmetic expression as follows:

console.log('Price: $' + (10 + 20));
Price: $30

As a rule of thumb, whenever in doubt, just group an expression with () to get it evaluated first.


Recall, from JavaScript Data Types, that all primitives in JavaScript are immutable in nature. That is, once created, they couldn't be modified.

An immutable value is one that can't be modified once created.

Any modifications desired to be made to an immutable value gets performed on a copy of the value, not on the actual value. This is an extremely crucial thing to keep in mind.

Strings, as we know, are primitives as well and are likewise immutable.

This could be witnessed in the code below:

var s = 'Good';
s[0] = 'F';


As can be seen, the log made in the console is exactly the same string s created at the start of this program. The statement s[0] = 'F' is simply ignored.

The reason is because strings are immutable — we can't mutate them.

If strings were mutable in JavaScript, this code would have logged 'Food' in the console instead of 'Good'.

The String constructor

As we saw in the chapter, a string could be created using the String() constructor.

We start with the new keyword followed by the String() function's invocation. Inside the parentheses, we specify an optional value which would be coerced into a string and set as the current object's value.

The String() constructor throws back a String object — NOT a string primitive.

This object has multiple properties and methods available on it, such as length, toUpperCase() toLowerCase(), and so on and so forth.

Below we create a String object and convert it into all uppercase characters.

What is the difference b/w a string primitive and object.

One of the most confusing things for newbie JavaScript devs is that most of the primitive values such as number, strings, and Booleans have equivalent object values in the language, so what should one use — primitives or objects.

For instance, consider the code below:

Here we have a string s that is output to the document.

The same code could be rewritten as follows:

This time we have a string object s that is output to the document.

The question is which of these to use?

Well, we discussed the answer to this in detail in the chapter, but from the perspective of numbers. Essentially the idea is the same for all values. Let's go over it one more time for the case of strings.

The purpose of these constructor objects is to box primitive values.

When we create a string primitive and access a property on it, JavaScript automatically converts the primitive into the equivalent object behind the scenes, access the property on that object, and finally removes it.

Let's see how this works.

Consider the code below:

Here we create a string primitive and then access the length property on it. This length property doesn't exist on s, since it is a primitive value.

What JavaScript does at this point before accessing the length property is that it boxes the primitive s into an object.

Shown below is a rough depiction of what happens behind the scenes:

var s = 'Hello';
var _s = new String(s);
_s = null;

JavaScript automatically creates a new variable and assigns it a String object that is constructed using the existing value s. After this, it performs all the operations performed on s in the source code and in the end, sets _s to null.

This has the consequence of the string object being garbage-collected. Everything works under the hood, and we feel as if we accessed a property on a primitive.

How clever is JavaScript!

So to boil it down, the use of new String() is limited to the JavaScript engine — we don't need to use these to create the respective values in our code snippets.

In fact, if we were to do so, we would be complicating our code visually and memory-wise as well.

Visually because so many constructor expressions could unnecessarily elongate the source code and memory-wise because we are creating objects and objects, and only objects, in memory that store a lot of overhead in addition to the actual value.

This doesn't happen with primitives — they just store the value; no overheads.

In addition to this, many operations such as typeof wouldn't work as expected on object values such as new String().

In short, it's a mess to use constructor functions explicitly to create strings, numbers or Booleans.

Woah, this was some solid theory under discussion!

One extremely crucial thing to remember is that String() is different from new String(). The former coerces a given value into a string primitive, whereas the latter converts a given value into the string object.

This means that you could use String() (or Number(), or Boolean()) to convert a given value into a string (or number, or Boolean) primitive.

When the new keyword comes into the game, then it's a different story, as we've discussed in detail above.

In the end

Understanding these concepts are imperative before you move on to explore string properties and methods in the next chapter. If you are unable to understand any one of them, consider reviewing the sections above and see if you understand it on reading them twice or even more times.

Experiment around with these concepts in the console, and once you are well off with them consider moving on to the next chapter. Keep learning and progressing!