在 JavaScript 中编写多行字符串的最简洁的方法是啥？ [复制]

Posted 2023-02-16

【中文标题】在 JavaScript 中编写多行字符串的最简洁的方法是啥？ [复制]

【英文标题】：What's the cleanest way to write a multiline string in JavaScript? [duplicate]在 JavaScript 中编写多行字符串的最简洁的方法是什么？ [复制]

【发布时间】：2010-12-08 00:51:41

【问题描述】：

它实际上不需要添加换行符，只需一些可读的东西。

还有什么比这更好的吗？

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

【问题讨论】：

这个问题中的示例肯定比@dreftymac no 的答案更具可读性？

问候@jasdeepkhalsa。有两种方法可以查看它。由于字符较少，上面的示例绝对是可读的。当您必须通过添加或删除行或更改行的顺序来与代码交互 时，就会出现问题。 dreftymac 示例包含更多字符，但与代码交互更容易，不会意外触发语法错误。

【参考方案1】：

与 NickFitz 的答案几乎相同：

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

不同之处在于，代码更易于维护，因为可以对行重新排序而无需考虑逗号的位置。没有语法错误。

【讨论】：

这也使得在连接字符为 \n 的情况下自动换行非常有用。非常方便。

【参考方案2】：

我喜欢这个版本（与你的只是代码格式不同）：

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

【讨论】：

是的，一目了然。

这也无效。我曾经有一个像这样的 html 脚本，我不得不重做它。

您必须转义 HTML，字符串的构造方式与验证无关。

JSHint 和大多数其他验证工具都希望在行尾使用连接运算符。

【参考方案3】：

你可以的

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

正如 cmets 中提到的，javascript 解析器可以很好地处理这个问题（它适用于所有主流浏览器），但不是 ECMA 脚本语法的正式部分。因此，它可能会也可能不会与压缩器、错误检查器一起使用，并且不保证在浏览器中也能正常使用。

这可能更具可读性，但不是“最好”的方式。也许 ECMA 脚本有一天会支持像 c# 的 @"" 这样的东西。

【讨论】：

哇。这真的有效。谢谢戈登！我根本不知道你能做到这一点......

可读但对 js 错误解析器不正确！

@Elzo Valugi “可读但对 js 错误解析器不正确！” jslint 不验证它，但我在javascriptlint.com 使用错误解析器，它确实验证了它。

这个符号不是官方 ECMA 标准的一部分，但是每个主要的 JS 引擎多年来都支持它。但是，您可能会遇到 JS 压缩器、语法高亮等问题。

如果您使用的是 JSLint，您可以使用 multistr 选项，以便通过它进行验证！

【参考方案4】：

仅供参考。 您建议的方式是正确的方式，并且比其他答案更好。 JsLint 仅验证您的版本。

【讨论】：

提示：保持这些行简短。如果它们延伸到屏幕之外，您将看不到 + 并且它变得不可读。或者像 Ionut 建议的那样将 + 放在行首。

【参考方案5】：

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

如果您确实需要字符串中的换行符，请将.join("") 替换为.join("\n")/

【讨论】：

这种方法是否仍然比“str”+“str”连接替代方案更快，还是对今天的浏览器无关紧要？

如果您有 maaaaaaaaaany 要连接的部分，则加入会更快，因为“+”将被执行 (n-1) 次，在每个步骤中创建临时结果。详情见video.yahoo.com/watch/4141759/11157560 23:08

我们有一个通过“str”+“str”构建整个页面的脚本，它非常慢（大约 30 秒页面加载）。我们改为使用这样的基于数组的附加系统，它下降到不到一秒。所以，是的，它更快:)

对于它的价值，至少在一些现代浏览器中 + 比那里的 join() 调用更快，特别是如果这段代码运行不止一次（因为常量字符串上的 + 被常量折叠成解析时的单个字符串）。

【参考方案6】：

始终如一。

无论您选择哪种方式，在整个应用程序中都以完全相同的方式进行。如果您正在开发一个已经编写过代码的应用程序，请接受他们设置的约定并遵循它。

【讨论】：

可惜不允许多次投票。这是解决因“One Right Way™”做事（在我们的行业中很常见）的争议而浪费精力和时间的最终解决方案。

【参考方案7】：

是的！你可以use the \ character to have JavaScript ignore end of line characters。

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

但是，作为pointed out by Elzo Valugi，这不会使用 JSLint 进行验证。

【讨论】：

据我记得，这在某些浏览器中不起作用。大概是某些版本的 IE。

Ionut：是的，你需要在你关心的所有浏览器中测试它，如果它在浏览器中失败，我怀疑它会是 IE。但我在 Firefox 中对此进行了测试，它在那里工作。

【参考方案8】：

这仅适用于支持E4X 的浏览器 - 我希望我们可以在 IE 中使用它

var str = <><![CDATA[

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

]]></>.toString();

【讨论】：

您不需要 XMLList 文字 (<>..</>)。你可以做<![CDATA[..text..]]>.toString()

你测试了吗？由于某种原因，它在 Firefox 中不起作用。根据标准，XMLCDATA 部分是 XMLMarkup，因此是 XMLInitialiser，引擎应将其识别为 PrimaryExpression (?)

Firefox 17 版不再支持此功能。我认为现在没有任何浏览器支持它。

@BrockAdams 感谢您的指出。我认为他们做了正确的事。必须同意 Brendan Eich 的观点 E4X "is a full of botches" and "crazyland objects"

【参考方案9】：

在使用 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);

*/);

这不适用于 Firefox，尽管它适用于 Chrome。

示例用途是编写/测试 webgl 着色器。 在开发过程中，使用起来会更好，并且 以后你总是可以用一个简单的正则表达式来运行它 将该语法转换为跨浏览器版本。

【讨论】：

现在可以在 Firefox 和最新的浏览器中使用。见this answer。