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

问题

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

Anything better than this?

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

回答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.

回答2:

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

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

回答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.

回答4:

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

回答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")/

回答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.

回答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.

回答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();

回答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.

来源：https://stackoverflow.com/questions/1589234/whats-the-cleanest-way-to-write-a-multiline-string-in-javascript

标签

javascript

string

readability

maintainability