So now that you have a general understanding of strings we will now dive right into first some basic concepts and in the next chapter, in some built-in features.

Creating strings

There are two ways to create a string in JavaScript.

Literal way

The first is known as the literal way and uses the string literals "" or '' to create a string directly. Backticks `` also count in string literals.

It creates a string primitive as shown below. Recall the fact that primitives are the opposite of objects i.e are values that have no properties or methods on them.

var str = "A string"; // a primitive
var str2 = 'Another string'; // a primitive

We can see what the typeof operator returns on strings created using literals.

var str = "A string";
console.log(typeof str); // "string"

Constructor way

The second way is the constructor way and uses the String() constructor to create a string. Unlike the literal way, it creates a string object which has properties and methods available on it.

var str = new String("A string"); // a String object
var str2 = new String('Another string'); // a String object

If you check the type of the string this time using you'll notice the difference yourself. The string is not of type "string" but rather of type "object".

var str = new String("A string");
console.log(typeof str); // "object"

As you can clearly see here, even constructors utilise the quotation marks to denote strings so why do we need to use them? The answer is simple - we don't. In fact we should almost never use them - they complicate code for the reader and come with literally no benefit whatsoever over the simple literal way.

We will discuss constructor functions in great detail in the Object Constructors chapter.

Backticks and new lines

As we have seen so far, strings can be denoted using double quotes or single quotes. However we can also use backticks `` to denote strings. The question is that do backticks provide some other special feature in string creation? Well the answer is yes!

Backticks can be used to create strings that span multiple lines. Double or single quotes can't be used to do so directly - they will break off once a new line is encountered and likewise throw an error.

Suppose you want to create a string with two lines. You'll have to use the \n newline character to add a new line if your were to use single or double quotes. Following is an illustration.

var str = "The first line\nThe second line";
console.log(str);
// "The first line
The second line"

You simply can't give new lines in the string directly. If you did so an error will be thrown.

var str = "The first line
The second line";
console.log(str);
// Uncaught SyntaxError: Invalid or unexpected token

Fortunately with backticks you can directly add new lines - no need to worry about adding \n or any errors throwing up.

var str = `The first line
The second line`;
console.log(str);
// "The first line
The second line"

Concatenation

So what is concatenation?

Concatenation is the joining of two or more strings together to produce a single large string.

In short, concatenation is just a fancy word for joining strings together.

We use the + concatenation operator to join strings together. However the same + operator is also used for adding numbers togther, so how can we distinguish between the two.

This is concatenation:

// + operator in concatenation context
var str1 = "Hello";
var str2 = " World!";
console.log(str1 + str2); // returns Hello World!
Also this:
// again + operator in concatenation context
var str1 = "Hello";
var num = 10;
console.log(str1 + num); // returns Hello10

Note in the example above we are concatenating a string with a number but still it would be considered a concatenation operation owing to the following rule.

The + operator will perform concatenation when either of the operands is a string.

Therefore all of the following are examples of concatenation:

// again + operator in concatenation context
console.log(10 + "Hello"); // returns 10Hello
console.log("Hello" + 10 + "Hello") // returns Hello10Hello
console.log("Hello" + 10 + 10 + "Hello") // returns Hello1010Hello
In the above example "Hello" + 10 + 10 + "Hello" would return "Hello1010Hello" and not "Hello20Hello" because interpretation is done from left to right.

Therefore this is the flow for "Hello" + 10 + 10 + "Hello":
  1. First "Hello" + 10 is performed and this gives the string "Hello10"
  2. Second "Hello10" + 10 is performed which gives the string "Hello1010"
  3. Lastly "Hello1010" + "Hello" is perfomed which gives the string "Hello1010Hello"

Quotes inside strings

Times will come when you would want to have quotes inside strings (single or/and double). You can simply add the quotes inside the string and this won't be an issue if you don't mess up with the quotes making up the string. What does this mean?

It simply means that if you have used double quotes to denote your string then you can't directly use double quotes within it. The same goes for single quotes.

As an example look at the following code. Here we aren't messing up with the quotes making up either of the strings:

var str1 = "What's up?"; // Single quotes in double quotes
var str2 = 'Golden saying: "Practice makes perfect!"'; // Double quotes in single quotes

However here we are messing up:

var str1 = 'What's up?'; // Single in single
var str2 = "Golden saying: "Practice makes perfect!""; // Double in double
// We are messing up with the quotes outside the string
Notice the colour of the areas of the code. This shall be the first indication to tell you that you have made a mistake in writing the code. The second shall be running the code and not getting what you expected.

Now you might be even able to explain why is this happening.

Simply because at the first quote inside the string the interpreter assumes that the string, started with the same quote, has ended. After that the rest of the part you assume to be a string is considered by the interpreter as reserved keywords, function names etc. which don't exist.

The fix - escape characters

So the workaround for this issue is to use a backslash and then write the quote you want to add.

What the backslash does is that it simply tells the interpreter to ignore, or better escape its following character. Therefore the following code is correct and isn't messing up:

var str1 = 'What\'s up?'; // Backslashed single in single
var str2 = "Golden saying: \"Practice makes perfect!\""; // Backslashed double in double
// We aren\'t messing up with the quotes outside the string

Immutability

Strings in JavaScript are by default immutable. So what does this mean?

Immutability means that actual values stored in memory can't be changed when functions or methods are performed on them.

What immutable simply means is that if you perform a method on a string, like uppercasing all letters, the actual string will not be altered. The method will be performed on a copy of the string and the return value then printed to the screen.

var str1 = "uppercase me!"; // the actual string
str1.toUpperCase(); // method performed

// you would expect the string to have been manipulated but it hasn't
console.log(str1); // uppercase me!
This concept will be better understood when you explore string methods.

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!