- Recognize how to declare a
String
- Define interpolation
- Explain how different quote characters allow flexibility
- Join
String
s 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. String
s) in our
JavaScript expressions.
We declare String
s 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 String
s 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
Number
s together. But we can also use it as a String
operator: when placed
between two String
s, 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 String
s, how to interpolate the
value of expressions into String
s, how to use different quote delimiters and
escaping to create more complicated String
s, and a couple different methods
for joining String
s.