What's the cleanest way to write a multiline string in JavaScript?

Question

It doesn't really have to add newlines, just something readable.

Anything better than this?

str = "line 1" +
      "line 2" +
      "line 3";

Answer 1

Almost identical to NickFitz's answer:

var str = [""
    ,"line 1"
    ,"line 2"
    ,"line 3"
].join("");
// str will contain "line1line2line3"

The difference, the code is slightly more maintainable because the lines can be re-ordered without regard to where the commas are. No syntax errors.

Answer 2

I like this version (different than yours just in formatting of the code):

var str = "line 1"
        + "line 2"
        + "line 3";

Answer 3

You could do

str = "\
line 1\
line 2\
line 3";

As mentioned in the comments, javascript parsers handle this fine (it works in all major browsers), but is not officially part of ECMA Script syntax. As such it may or may not work with compressors, error checkers, and isn't guaranteed to work in browsers.

This may be more readable, but isn't the 'best' way to do it. Maybe ECMA script will support something like c#'s @"" someday.

Answer 4

FYI. The way you suggest it is the correct way and better than the other answers. JsLint only validates your version.

Answer 5

var str = [
    "line 1",
    "line 2",
    "line 3"
].join("");
// str will contain "line1line2line3"

If you actually want newlines in the string, then replace .join("") with .join("\n")/

Answer 6

Consistently.

Whichever way you choose, do it exactly the same way throughout your application. If you're working on an application that already has code written, accept the convention they set and go with it.

Answer 7

Yes! You can use the \ character to have JavaScript ignore end of line characters.

str = 'line 1 \
line 2 \
line 3';

However, as pointed out by Elzo Valugi, this will not validate using JSLint.

Answer 8

This will only work in browsers with E4X support - I wish we could use it in IE

var str = <><![CDATA[

   Look, a multi-line
   string! < " // ' ? &

]]></>.toString();

Answer 9

Here's one that may be helpful during development when using Chrome.

function FSTR(f) {
    // remove up to comment start and trailing spaces and one newline
    s = f.toString().replace(/^.*\/\* *\r?\n/,"");
    // remove the trailing */} with preceeding spaces and newline
    s = s.replace(/\n *\*\/\s*\}\s*$/,"")
    return s;
}

s = FSTR(function(){/*
uniform vec2 resolution;
uniform float time;

void main(void)
{
    vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / resolution.xy;
    vec2 cc = vec2( cos(.25*time), sin(.25*time*1.423) );
    ...
    float color = sqrt(sqrt(dmin))*0.7;
    gl_FragColor = vec4(color,color,color,1.0);
}
*/});

This does not work for Firefox, although it works in Chrome.

Example use would be for writing/testing webgl shaders. During development this is much nicer to work with and later you can always run over this with a simple regexp that converts that syntax into a cross-browser version.