• Recognize how to declare a String
• Define interpolation
• Explain how different quote characters allow flexibility
• Join Strings using +

Thus far in programming as conversation, we've used numbers as data most of the time. Numbers are great because they reach across languages and cultures. But there are times when we need our programs to return information in the form of text. In this lesson, we'll learn more about using text (i.e. Strings) in our JavaScript expressions.

We declare Strings most often by enclosing our text in double quotes:

const greeting = "Hello, folks";

The letters inside of a String are often called "characters."

The pair of matching "s are called "String delimiters" because they form a boundary or limit around the characters that make up the String.

We can also declare Strings by putting the characters in single quotes:

const greeting = 'Hello, folks';

or backticks:

const greeting = `Hello, folks`;

Single quotes and double quotes can be used interchangeably in JavaScript — they are treated the same. Using backticks to enclose a string, however, brings some additional capabilities. A string enclosed in backticks forms a template literal, which allows you to interpolate data into the String.

String interpolation is the process of injecting the value of an expression (often, but not necessarily, the variable lookup expression) into a String. You wrap the expression inside the interpolation operator which lets JavaScript know that it should interpret the value of the expression, convert it to a String if necessary, and insert it into the containing String where the interpolation operator appeared.

The interpolation operator looks like this: ${}. When it appears in a backtick-delimited String, the return value of the expression inside the operator is "plugged in" to the containing String.

In a single or double-quoted String there is no interpolation possible. JavaScript would not interpret the value inside the ${}; instead, it would create a literal string containing the operator and whatever expression is inside it.

const barkCount = 3;
const backtick = `Spinach barks ${barkCount} times`; //=> "Spinach barks 3 times"
const singleQuote = 'Spinach barks ${barkCount} times'; //=> "Spinach barks ${barkCount} times"
const doubleQuote = "Spinach barks ${barkCount} times"; //=> "Spinach barks ${barkCount} times"

The expression inside the ${} does not need to be a variable lookup. Any expression, i.e., any statement that returns a value, can be used:

const spinach = `Spinach is ${2 + 3} years old`; //=> "Spinach is 5 years old"

Here JavaScript knows to interpret the value inside the interpolation operator because the string is enclosed in backticks. It evaluates the expression (2 + 3 yields the value 5), turns the result into a string and inserts it in place.

What if you needed to store some dialog as a String:

In the book it would look like:

"Wait," said Jo, "Do not go without me!"

If we want to create a string containing this text, we might try wrapping the whole thing in quotes, like this:

""Wait," said Jo, "Do not go without me!""

However, because " is the String delimiter, JavaScript would get confused. It would attempt to end the String right before the W as the two "s "delimit" the String. Not what we wanted.

To fix this, we can use single quotes as our delimiter instead:

const littleWomanEsque = '"Wait," said Jo, "Do not go without me!"';

Because the opening delimiter of the String was ', JavaScript will "close" the String at the next ' — at the very end. Inside of the single quotes, the " loses its meaning of "here's a String" and, instead, is just a plain literal, letter-like character ".

But oh my goodness, what if the speaker said Don't instead of Do not. That would break our String again as JavaScript attempted to use the ' inside Don't as the closing delimiter.

Sometimes we need to tell JavaScript, "Don't use this ' or " as a String delimiter. To do this we need escaping.

We can "escape" the power of " or ' to close a String by putting a \ in front of it:

const littleWomanEsque = '"Wait," said Jo, "Don\'t go without me!"';

Without the backslash, JavaScript would interpret the apostrophe inside "Don't" as the end of the string, and we'd end up with a mess. BUT since there is a \ immediately before the second ' (the apostrophe), thus escaping it, JavaScript says "Oh you mean to use this as a character, not as a String delimiter. I'll find the next unescaped '."

It doesn't find an unescaped ' until the very end, just like we want.

We already know that we can use + as an arithmetical operator to add two Numbers together. But we can also use it as a String operator: when placed between two Strings, it joins them and returns a new String.

You may want to follow along with the examples in replit. Remember to use the console window (the one on the right), and that, if you get an error, you can "reset" the console by clicking the run button.

const firstName = "Spinachius";
const clanName = "Karbitus";
const commonName = "Maris";
let fullName;

// With +
fullName = firstName + " " + clanName + " " + commonName; //=> "Spinachius Karbitus Maris"

// Or, with interpolation
fullName = `${firstName} ${clanName} ${commonName}`; //=> "Spinachius Karbitus Maris"

// Keep in mind it returns a _new_ String; therefore:
firstName; //=> "Spinachius"
clanName; //=> "Karbitus"
commonName; //=> "Maris"
fullName; //=> "Spinachius Karbitus Maris"

Recall from the lesson on data types that JavaScript, unlike some other programming languages, will bend over backwards to return a value instead of throwing a type error. This means that the following will work in JavaScript:

const fact = "Spinach is "; // fact is of type `String`
const tail = " years old"; // tail is of type `String`
const age = 5; // age is of type `Number`

fact + age + tail; //=> "Spinach is 5 years old"

If we were to try this in Ruby or Python, we would get an error, but JavaScript returns what it thinks we meant to do. While in this case this seems pretty reasonable, there are times when JavaScript's behavior will yield unexpected results. For this reason, best practice is not to depend on JavaScript to handle mixed data types in this way. A better way to handle this situation is by using interpolation instead:

const fact = "Spinach is";
const tail = "years old";
const age = 5;

`${fact} ${age} ${tail}`; //=> "Spinach is 5 years old"

Here, by using backticks and the interpolation operator, we are explicitly telling JavaScript to interpret the expression inside the ${}, convert it to a string (if necessary), and insert it into our String.

Another alternative is to use JavaScript's toString() method:

const fact = "Spinach is "; // fact is of type `String`
const tail = " years old"; // tail is of type `String`
const age = 5; // age is of type `Number`

fact + age.toString() + tail; //=> "Spinach is 5 years old"

The choice of whether to use + or interpolation is, to a certain extent, a matter of personal preference — you can accomplish what you need to using either method. That said, however, JavaScript programmers tend to use interpolation more often than +. As you gain experience working with strings, you may find that using interpolation results in cleaner code that's easier to read. As a general rule, if the string you're constructing is simple and short, using + may be cleaner but you may want to consider using interpolation with more complex strings.

In this lesson, we learned how to declare Strings, how to interpolate the value of expressions into Strings, how to use different quote delimiters and escaping to create more complicated Strings, and a couple different methods for joining Strings.