Multi-Line Strings in JavaScript

Strings, in JavaScript programming parlance, are a series of characters all belonging together. This paragraph can be seen as a string.

Sometimes, strings need to be more than one line. Strings containing literal line breaks can break JavaScript code because JavaScript is line-break sensitive.

However, JavaScript has several ways to handle multi-line strings.

In the examples of this article, we'll use this multi-line string:

The red fox (who was being 
followed by a wolf) ran 
faster than the gray fox.

I'll show you three ways to handle multi-line strings in JavaScript.

1. Deal with each line separately.

2. Programmatically concatenate the lines into one line. ("Concatenate" is a programming term meaning to append one value to the end of another, generally applied to strings but can also be applied to other types of non-numeric values. Numeric values would need to be converted into a string before concatenation could be applied.)

3. Tell JavaScript to ignore specific line breaks.

Before showing how to do it, here's a way that will not work.

<script type="text/javascript"><!--
document.write("The red fox (who was being 
followed by a wolf) ran 
faster than the gray fox.");
//--></script>

Because JavaScript is line-break sensitive, the above string spanning multiple lines results in a JavaScript error.

Deal With Each Line Separately

One way to handle multi-line strings in JavaScript is to deal with each line separately.

<script type="text/javascript"><!--
document.write("The red fox (who was being ");
document.write("followed by a wolf) ran ");
document.write("faster than the gray fox.");
//--></script>

Programmatically Concatenate the Lines Into One Line

Another way to deal with multi-line strings in JavaScript is to append each following line to the previous one, making one virtual long line by concatenating the three lines. It's done by ending the line with the + operator to append the string on the next line.

<script type="text/javascript"><!--
document.write("The red fox (who was being " +
"followed by a wolf) ran " +
"faster than the gray fox.");
//--></script>

Tell JavaScript to Ignore Specific Line Breaks

This method of dealing with multi-lines in JavaScript is almost identical to the non-working method in the first example of this article. The only difference is the backward slash character ("\"), sometimes referred to as the escape character, at the end of the first two string lines.

The backward slash character tells JavaScript to ignore the immediately following line break. It lets the multi-line string pass through without error.

<script type="text/javascript"><!--
document.write("The red fox (who was being \
followed by a wolf) ran \
faster than the gray fox.");
//--></script>

There are 3 ways to deal with multi-line strings in JavaScript. And another that won't work.

Use the method you're most comfortable with for the implementation you have in mind.

(This article first appeared in Possibilities ezine.)

Will Bontrager