1.1 Concatenating (Joining) Strings

NN 2, IE 3

1.1.1 Problem

You want to join together two strings or accumulate one long string from numerous sequential pieces.

1.1.2 Solution

Within a single statement, use the plus (+) operator to concatenate multiple string values:

var longString = "One piece " + "plus one more piece.";

To accumulate a string value across multiple statements, use the add-by-value (+=) operator:

var result = "";
result += "My name is " + document.myForm.myName.value;
result += " and my age is " + document.myForm.myAge.value;

The add-by-value operator is fully backward-compatible and is more compact than the less elegant approach:

result = result + "My name is " + document.myForm.myName.value;

1.1.3 Discussion

You can use multiple concatenation operators within a single statement as needed to assemble your larger string, but you must be cautious about word wrapping of your source code. Because JavaScript interpreters have a built-in feature that automatically inserts semicolons at the logical ends of source code lines, you cannot simply break a string with a carriage return character in the source code without putting the syntactically correct breaks in the code to indicate the continuation of a string value. For example, the following statement and format triggers a syntax error as the page loads:

var longString = "One piece " + "plus one
more piece.";

The interpreter treats the first line as if it were:

var longString = "One piece " + "plus one;

To the interpreter, this statement contains an unterminated string and invalidates both this statement and anything coming after it. To break the line correctly, you must terminate the trailing string, and place a plus operator as the final character of the physical source code line (do not put a semicolon there because the statement isn't finished yet). Also, be sure to start the next line with a quote symbol:

var longString = "One piece " + "plus one " +
"more piece.";

Additionally, whitespace outside of the quoted string is ignored. Thus, if you wish to format the source code for improved readability, you can even indent the second line without affecting the content of the string value:

var longString = "One piece " + "plus one " +
    "more piece.";

Source code carriage returns do not influence string text. If you want to include a carriage return in a string, you need to include one of the special escaped characters (e.g., \n) in the string. For example, to format a string for a confirm dialog box so that it creates the illusion of two paragraphs, include a pair of the special newline characters in the string:

var confirmString = "You did not enter a response to the last " +
    "question.\n\nSubmit form anyway?";

Note that this kind of newline character is for string text that appears in dialog boxes or other string-only containers. It is not a newline character for text that is to be rendered as HTML content. For that kind of newline, you must explicitly include a <br> tag in the string:

var htmlString = "First line of string.<br>Second line of string.";

1.1.4 See Also

Recipe 1.8 to see how to include special control characters (such as a carriage return) in a string value.