logo标签列表

在JavaScript中创建多行字符串

javascriptstringmultilineheredoc
3420

我有以下的 Ruby 代码。我想将这段代码转换成 JavaScript。请问在 JavaScript 中等价的代码是什么？

text = <<"HERE"
This
Is
A
Multiline
String
HERE
43个回答
3
您可以使用 += 来连接您的字符串。似乎没有人回答这个问题，这样做将会更易于阅读，同时保持整洁... 就像这样。
var hello = 'hello' +
            'world' +
            'blah';

可以写成

var hello = 'hello';
    hello += ' world';
    hello += ' blah';

console.log(hello);
3

我的基于数组的字符串连接版本：

var c = []; //c stands for content
c.push("<div id='thisDiv' style='left:10px'></div>");
c.push("<div onclick='showDo(\'something\');'></div>");
$(body).append(c.join('\n'));

这种方式对我来说效果很好，特别是我经常将值插入到这样构建的html中。但它有很多限制。缩进会很好。不必处理嵌套引号会非常好，而且它的笨重也让我感到困扰。

使用.push()添加到数组会占用很多时间吗？请参见此相关答案：

(JavaScript开发人员为什么不使用Array.push()？)

在查看这些（相反的）测试运行后，看起来.push()对于不太可能超过100个项目的字符串数组是可以的 - 对于较大的数组，我将避免使用它而改用索引添加。

2
你需要使用字符串拼接运算符 '+'。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var str = "This "
                + "\n<br>is "
                + "\n<br>multiline "
                + "\n<br>string.";
        document.getElementById("demo").innerHTML = str;
     </script>
</body>
</html>

使用\n，你的源代码看起来像这样 -

This 
<br>is
<br>multiline
<br>string.

使用<br>，你的浏览器输出将会长成这个样子 - 

This
is
multiline
string.
2

在2015年ES6被引入时，JavaScript终于拥有了处理多行字符串的良好方式——模板字面量。

模板字面量是由反引号(``)包围的字符串，而不是常规的单引号('')/双引号("")。

我不知道为什么这个答案没有被选为正确答案！ - Hasan Shouman
1

我认为这种解决方法在IE、Chrome、Firefox、Safari和Opera中都能正常工作 -

使用jQuery：

<xmp id="unique_id" style="display:none;">
  Some plain text
  Both type of quotes :  " ' " And  ' " '
  JS Code : alert("Hello World");
  HTML Code : <div class="some_class"></div>
</xmp>
<script>
   alert($('#unique_id').html());
</script>

使用纯JavaScript:
<xmp id="unique_id" style="display:none;">
  Some plain text
  Both type of quotes :  " ' " And  ' " '
  JS Code : alert("Hello World");
  HTML Code : <div class="some_class"></div>
</xmp>
<script>
   alert(document.getElementById('unique_id').innerHTML);
</script>

干杯!!

"<xmp>"已经过时了。虽然在HTML中可能被允许，但任何作者都不应该使用它。请参见https://dev59.com/YWsy5IYBdhLWcg3wzBJ4。 - Bergi
@Bergi，你是对的。使用<pre>;和转义字符不会帮助解决我的问题。我今天遇到了类似的问题，正在尝试找到一个解决方法。但是在我的情况下，我发现一种非常新手的解决方法是将输出放在HTML注释中，而不是<xmp>或任何其他标记中。哈哈。我知道这不是一种标准的做法，但我明天早上会继续解决这个问题。干杯！ - Aditya Hajare
不幸的是，即使使用 style="display:none"，Chrome 仍然会尝试加载示例块中提到的任何 <img> 图像。 - Jesse Glick
0

刚试了匿名回答，发现这里有一个小技巧，如果反斜杠\后面有空格，它就不起作用了。
因此，以下解决方案无法正常工作-

var x = { test:'<?xml version="1.0"?>\ <-- One space here
            <?mso-application progid="Excel.Sheet"?>' 
};

但是当去除空格时它可以工作 -
var x = { test:'<?xml version="1.0"?>\<-- No space here now
          <?mso-application progid="Excel.Sheet"?>' 
};

alert(x.test);​

希望能对你有所帮助！

7
如果反斜杠后面有空格，那么显然反斜杠会将其转义。它应该是用于转义换行符而不是空格。 - Sejanus
0

我是这样编程的：

sys = {
    layout: null,
    makeLayout: function (obCLS) {
        this.layout = $('<div />').addClass('editor').appendTo($(obCLS)).append(

            /* Cargador */
            /* @this.layout.find('> div:nth-of-child(1)'); */
            '<div>' +
            '   <p>Seleccione la imagen que desea procesar.</p>' +
            '   <input type="button" value="Seleccionar" class="btn btn-xlarge btn-success" />' +
            '   <span></span>' +
            '</div>' +

            /* Cargador - Progreso */
            /* @this.layout.find('> div:nth-of-child(2)'); */
            '<div>' +
            '   <div>' +
            '       <div></div>' +
            '       <div>' +
            '           <div></div>' +
            '       </div>' +
            '   </div>' +
            '</div>' +

            /* Editor */
            /* @this.layout.find('> div:nth-of-child(3)');
             * @sidebar = this.layout.find('> div:nth-of-child(3) > div > div > div:nth-of-type(1)');
             * @body    = this.layout.find('> div:nth-of-child(3) > div > div > div:nth-of-type(2) > div'); */
            '<div>' +
            '   <div>' +
            '       <div>' +
            '           <div></div>' +
            '           <div>' +
            '               <div></div>' +
            '           </div>' +
            '       </div>' +
            '   </div>' +
            '</div>'
        );
    }
}

sys.makeLayout('#div');
5
那太可怕了，人们不使用那种编程方式是有原因的。 - Barry Chapman
7
将 HTML 放在它应该放置的地方，即 HTML 文档中。隐藏 HTML 并使用 jQuery 在需要时显示它。更加清晰简洁，易于维护。 - Tek
是的，我想道歉，7年过去了，我不再以那种方式编程，显然HTML代码必须在HTML或JSX中而不是JavaScript代码内部。 - e-info128
0

如果你只在Node中运行，你可以使用fs模块从文件中读取多行字符串：

var diagram;
var fs = require('fs');
fs.readFile( __dirname + '/diagram.txt', function (err, data) {
  if (err) {
    throw err; 
  }
  diagram = data.toString();
});
0

我认为我发现了另一种方法，可以在每行没有任何侵入性语法的情况下进行内联操作。使用Javascript将函数转换为字符串的能力，并使用/**/语法创建多行注释，然后删除"function() {/*\n"和"\n*/}"。

var multiline = function(string) { return string.toString().replace(/(^[^\n]*\n)|(\n\*\/\})/g, ""); };

console.log(multiline(function() {/*
Hello world!
I'm a multiline string!

Tada!
*/}));

我能看到的唯一陷阱就是语法高亮。

编辑：如果我向下滚动一点，我会看到这个答案做了完全相同的事情：https://dev59.com/c3RA5IYBdhLWcg3w2xsI#5571069

0
规则是：在字符串内部，使用 \n 来表示新的一行；你不必在 \n 前后加上空格，JavaScript 解释器足够智能，知道不可打印字符的表示长度。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接