String Concatenation and String Operators

When working with JavaScript strings, you will often need to combine two or more separate strings together to form one string. Conversely, at times you will want to break up a long string into multiple strings simply to make your source code more readable. In either case, the same techniques are used to bind multiple strings back together to form a single string.

Binding multiple strings together is known as concatenation. Concatenating strings can be accomplished in one of two ways using string operators.

The String Operator

The first operator, called the string operator, is the plus sign ( + ). It is used to signify that one whole string is to be 'added' to another whole string. (Yes, the string operator is also an arithmetic operator.)

var greeting = "Hello World." + " My name is Jennifer."

<a href="javascript:alert(greeting)">alert(greeting)</a>

Any mix of string literals and string variables may be concatenated, and you may concatenate as many literals and variables on the same line as you wish.

var myName = "My name is Jennifer."
var myString = "Hello World. " + myName // myString is a concatenation of a literal and a variable

<a href="javascript:alert(myString)">alert(myString)</a>

var longGreeting = "Hello World." + " My name is Jennifer." + " What is your name?" // 3 literals concatenated

<a href="javascript:alert(longGreeting)">alert(longGreeting)</a>

The Add By Value Operator

The second operator used to concatenate strings is the add-by-value operator ( += ). The add by value operator does the same thing as the string operator, but it offers a shortcut when concatenating long strings repeatedly. Without it, long concatenations can become unwieldy as in the example below:

var longString = "Hello World."
alert(longString)

longString = longString + " My name is Jennifer."
alert(longString)

longString = longString + " What is your name?"
alert(longString)

The same strings can be concatenated in a much more efficient way by using the add by value operator to eliminate the second reference to the string variable:

var efficientString = "Hello World."
efficientString += " My name is Jennifer."
efficientString += " What is your name?"

<a href="javascript: alert(efficientString)">alert(efficientString)</a>

Breaking Up Long Strings Using The String Operator

There is a way to use the string operator ( + ) to simplify concatenation even more than the add by value operator ( += ) does. Simply add the string operator to the end of each segmented string after its closing quote. Then after a carriage return, place the next segmented string on the following line. This way concatenation occurs without any reference to the first segmented string variable or literal.

var easiest = "Hello World. " +
"My name is Jennifer. " +
"What is your name?"

<a href="javascript alert(easiest)">alert(easiest)</a>

Remember to place the operator outside the quotes, after each string segment except for the last. Also, do not follow the operator with a semicolon which indicates the end of a statement because your statement is not ending - it is continuing on the next line. Although the carriage return acts as a substitute for the semicolon in every other case, when it follows the string operator, it is not interpreted as the end of a statement.

Example Application

If you are new to programming, you may be wondering what purpose concatenation serves. While I can't begin to go into how useful it will become to you, I can show you an example to spark your imagination. In the following example, the function invoked by the click of the form button will take the text you enter into the text field and alert the result of that text concatenated with a string defined in the function. (No validation is performed at this time, we'll cover that in later lessons!)

function alertName(){
var studentName = document.nameForm.nameField.value // store text field value in variable

   if(studentName != "") {// if field is not empty
   alert("Hello, " + studentName + "! So nice to meet you.") // concatenate text field value with this string
   }
   else{
   alert("Please Enter Your Name!")
   }

}

<form name="nameForm">
<input type="text" name="nameField">
<input type="button" onclick="alertName()">

</form>