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.
The first is known as the literal way and uses the string literals
'' 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"
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
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.
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"
So what is concatenation?
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!
// 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.
+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
"Hello" + 10 + 10 + "Hello"would return
"Hello20Hello"because interpretation is done from left to right.
Therefore this is the flow for
"Hello" + 10 + 10 + "Hello":
- First "Hello" + 10 is performed and this gives the string
- Second "Hello10" + 10 is performed which gives the string
- Lastly "Hello1010" + "Hello" is perfomed which gives the string
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
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
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!
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!