Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
JavaScript provides ways to combine two or more strings into a single string, and it's something you'll likely do a lot in programming. There are different techniques for combining strings in JavaScript. First, learn how to add strings together using a process called "concatenation."
JavaScript provides ways to combine two or
more strings into a single string, and
0:00
it's something you'll likely do a lot and
programming.
0:05
For example, you might collect
the user's first name as one string and
0:08
their last name as a separate string.
0:11
To display the user's full name on the
page, you need to combine the two strings.
0:13
And what if you want to display
their full name within a message?
0:18
You'd have to combine the first and
last name strings with the message string.
0:21
There are different techniques for
combining strings in JavaScript.
0:26
First, I'll teach you how to add
strings together using a process
0:29
called concatenation.
0:32
String concatenation is
the process of combining or
0:34
adding two or more strings together
to create a bigger string.
0:37
One way to concatenate strings in
JavaScript is with the + operator.
0:41
For example, by adding the string
my favorite to the string movies,
0:45
we end up with one longer string.
0:49
In JavaScript,
you'll often need a string to hold a value
0:52
that you can't predict
until your program runs.
0:54
For example, if you want your
program to greet someone by name,
0:57
you might store the greeting
Hello in a variable.
1:00
Well, you cannot know the person's
name ahead of the time.
1:02
So your program need to combine the stored
Hello with the person's name at the time
1:05
the program collects that information
like when they login for example.
1:10
Now, that you've learned the method for
collecting information from a user,
1:14
I will teach you how to use that
input to create different messages.
1:17
We'll do this by combining
the string returned
1:20
by the prompt method with another screen.
1:23
Open the file named combine.js
inside your js folder and
1:25
update the script tag in
index.html to point to combine.js.
1:32
Let's start by declaring two variables,
name and message.
1:43
Name will store the value returned
by a prompt dialog that asks,
1:52
What is your name?
1:57
Then assign the message variable,
a string that holds the word Hello.
2:02
Now, let's add the name the visitor
typed into the prompt dialog
2:09
to this string to create a message
like Hello Gil or Hello Anwar.
2:13
Again, one way to combine or concatenate
strings is with the + operator like this.
2:18
Name holds the string returned
by the prompt method.
2:24
So notice how we're literally joining the
two strings together with the + symbol.
2:29
Let's log the value of message to
the console with console.log message.
2:35
If I save the file, and refresh
the browser, the prompt dialog appears.
2:42
I'll type my name, click OK and
see the message in the console.
2:48
But notice that there's no space
between Hello and my name.
2:54
When you combine strings, you're literally
placing them next to each other.
2:58
So if you need a space,
you have to add it.
3:02
I'll go back to my JavaScript file and add
a space at the end of the string Hello,
3:05
I'll save the file,
refresh the page and that looks good.
3:12
When a variable like name contains
a string, adding that variable to
3:18
another string is exactly the same
as combining the two strings.
3:23
In other words,
the variable is really a placeholder for
3:28
the string value stored inside it.
3:32
You can add any number
of strings together.
3:34
For example, I can add another
string to the message value, like so
3:36
period space Welcome to my music site,
And a period and a space.
3:41
I'll save the file,
refresh the browser, enter my name and
3:49
the console display the longer string.
3:54
Hello Guil.
3:57
Welcome to my music site.
3:57
In programming there might be times
when you want to create a long string,
3:59
maybe even an entire paragraph
of text that includes string
4:03
values from several variables.
4:06
In that case, you can use the +
operator over and over, but
4:08
doing that can often make
your code hard to read.
4:12
For example,
I'll concatenate the string, I'm so
4:15
happy that you came by to visit, ,.
4:20
Then concatenate the string
stored in the name variable.
4:29
Then concatenate another string
that holds the text period space.
4:35
Feel free to come again and
listen to more music.
4:41
I'll save the file,
refresh the browser, enter my name,
4:53
and there's the longer string.
4:58
Hello Guil.
5:00
Welcome to my music site.
5:01
I'm so
happy that you came by to visit, Guil.
5:03
Feel free to come again and
listen to more music!
5:05
Good, to make your code easier to read,
5:08
you can create a longer string using
a series of smaller statements.
5:10
For example, I can begin to
rewrite this code like this.
5:15
On the next line,
type message = message + I'm so
5:21
happy that you came by to visit.
5:27
This approach might look familiar,
5:42
the variable message appears
twice in the statement.
5:44
Remember, when putting
a value into a variable,
5:47
whatever's to the right of the equal
sign goes into the variable on the left.
5:51
In this case, what's on the right is
the current contents of the variable
5:56
message added to the string, I'm so
happy that you came by to visit.
6:00
These two strings are combined, and
6:04
then the result is placed back
into the variable message.
6:06
This works like earlier when we added more
points to the current value of the score
6:10
variable.
6:13
For example, in this case, instead of
completely replacing what's inside the box
6:14
labeled message with something else, we're
adding to the current contents of the box.
6:19
And you learned that there's a shorthand
for adding to the contents of a variable.
6:24
Replace this part with a +=,
6:28
or the addition assignment operator.
6:32
Feel free to use whichever
method you like, but
6:36
+= does require a little less typing.
6:39
Next, I'll build up the rest
of the string like this,
6:42
message += the string stored
in the name variable.
6:47
Then on the next line, message +=.
6:51
Feel free to come again and
listen to more music.
7:00
Let's see how this works.
7:10
I'll save the file and
refresh the browser,
7:12
type my name into the prop
dialog then click OK.
7:16
In the console, we're not seeing the final
message instead there is some sort of
7:21
Uncaught TypeError that says,
assignment to constant variable.
7:26
Can you figure out what's
producing this error?
7:30
On this line, we are declaring the message
variable using the keyword const.
7:33
Remember, the value of a variable
declared with const cannot be
7:39
changed through reassignment.
7:43
We're using the addition assignment
operator to reassign message,
7:46
to a longer and longer string value
until we have the final string.
7:49
In this case, we need to use the key
word let, which as you learned lets
7:53
you change or manipulate a variables
value through reassignment.
7:58
Now, let's try it.
8:02
Refresh the page.
8:05
I'll type Guil into the prompt dialog, and
there's the final message in the console.
8:08
Good, you've just learned
some really important skills,
8:13
how to add strings together using
a process called concatenation, and
8:17
how to combine strings with variables
that contain string values.
8:21
You need to sign up for Treehouse in order to download course files.
Sign up