Multi-Line JavaScript Strings
Written by David Walsh on November 2, 2012
The JavaScript language performs automatic semicolon insertion at the end lines, so creating multiline strings usually ends up looking something like this:
var multiStr = "This is the first line" + "This is the second line" + "This is more...";
String upon string of concatenated JavaScript mess...ugly, slow, and ...ugly. Many novice JavaScript developers don't know that there's a better way to create multiline strings:
var multiStr = "This is the first line \ This is the second line \ This is more...";
Adding a backslash at the end of each line tells the JavaScript engine that the string will continue to the next line, thus avoiding the automatic semicolon insertion annoyance. Note that the second string includes line breaks within the string itself. Just another nice tip to add to your JavaScript arsenal!
It should be noted the backslash multiline string notation is not part of any ECMAScript standards and can break various minifiers. Otherwise, it’s definitely good to know!
I think this is quite controversial. Other than issue with minifiers, ‘backslashes’ can cause error if there is any white space after it. I often write multiline string as arrays and join, this way IMO is quite readable.
var multiStr = [
"This is the first line",
"This is the second line",
"This is more..."
].join("\n");
You can also see the intent here wether it’s about construct a real multiline string (with join(“\n”)) or just try to avoid writing a long string (with join(“”)).
/*** @tungd : +1
*
* Moreover, you can't indent your code or it will add the whitespaces to the string.
*
* e.g:
**/
"my string \
is long" === "my string is long"; // and not "my string is long"
See also this performance test from different possibilities; the \ variant is the fastest.
I forgot about this implementation till this morning while I was working on some jQuery forms. Funny I came across this now.
While I understand the concern for minifiers, we don’t write JS for minifiers, we write JS for JS interpreters. JS minifiers need to improve. If the minifier you use doesn’t support this basic pattern, however, feel free to work around it.
When I first found out that you could escape newlines, I thought it was a pretty neat way to split a single line of text over several lines. It’s advantages are that it’s faster than concatenation and more readable than having the text spanning one long line that you have to scroll through.
However, it’s slower, less readable and less maintainable than having the text on one line and just turning on word wrap in your IDE. It’s also error prone, for reasons explained above.
The most common reason for including large, unbroken chunks of text in a JavaScript file is for the purposes of HTML injection, in which case I would personally include the text in a separate tag, which I then retrieve with innerText and store in a variable. That way, I can format it as HTML, but it won’t get shown on the page, nor get interpreted as JavaScript. Yes, it’s slower, but it’s much more readable and maintainable.
You can just use the first one, minifiers (at least uglify-js) will change the
var a = "foo" + "bar";intovar a = "foobar";anyway.