我在Ruby中有以下代码。我想把这段代码转换成JavaScript。JS中的等效代码是什么?

text = <<"HERE"
This
Is
A
Multiline
String
HERE

当前回答

JavaScript从未有过处理多行字符串的真正好方法,直到2015年引入ES6以及模板文本。

模板文本是由反引号(``)分隔的字符串,而不是普通的单引号(“”)/双引号(““”)分隔符。

其他回答

您可以在纯JavaScript中使用多行字符串。

此方法基于函数的序列化,该序列化被定义为依赖于实现。它在大多数浏览器中都能工作(见下文),但不能保证它在未来仍能工作,所以不要依赖它。

使用以下功能:

function hereDoc(f) {
  return f.toString().
      replace(/^[^\/]+\/\*!?/, '').
      replace(/\*\/[^\/]+$/, '');
}

这里可以有这样的文档:

var tennysonQuote = hereDoc(function() {/*!
  Theirs not to make reply,
  Theirs not to reason why,
  Theirs but to do and die
*/});

该方法已在以下浏览器中成功测试(未提及=未测试):

即4-10歌剧9.50-12(不在9-)Safari 4-6(不在3-中)铬1-45Firefox 17-21(非16-)Rekonq 0.7.0-0.8.0Konqueror 4.7.4不支持

不过,要小心你的缩小镜。它倾向于删除评论。对于YUI压缩程序,以/*开头的注释!(像我用过的那个)将被保留。

我认为真正的解决方案是使用CoffeeScript。

ES6 UPDATE:您可以使用backtick代替创建带有注释的函数,并在注释上运行toString。正则表达式需要更新为仅删除空格。您还可以使用字符串原型方法来执行此操作:

let foo = `
  bar loves cake
  baz loves beer
  beer loves people
`.removeIndentation()

应该有人编写此.removeIndentation字符串方法…;)

我找到了一个更优雅的解决方案,可能有点与主题无关,因为它使用了PHP,但我相信它对你的一些人来说会很有用和可爱。。。

这个javascript代码应该留在脚本标记中

var html=<?php echo json_encode("

        <div class=container>
            <div class=area1>
                xxx
            </div>
            <div class=area2>
                ".$someVar."
            </div>
        </div>

"); ?>

在输出html中,您将看到类似

var html="\r\n\r\n\t\t\t<div class=container>\r\n\t\t\t\t<div class=area1>\r\n\t\t\t\t\txxx\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=area2>\r\n\t\t\t\t\t44\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\r\n\t\t";  

 


瞧!,它为您的文件提供了代码可读性。

pD:此示例使用json_encode()PHP函数,但当然也有ASP、Ruby和JSP语言的等效函数。

pD:然而,这个解决方案也有他的局限性,其中之一就是不能在封装的代码中使用javascript变量。

实现这一点有多种方法

1.斜线拼接

  var MultiLine=  '1\
    2\
    3\
    4\
    5\
    6\
    7\
    8\
    9';

2.规则串联

var MultiLine = '1'
+'2'
+'3'
+'4'
+'5';

3.数组连接串联

var MultiLine = [
'1',
'2',
'3',
'4',
'5'
].join('');

就性能而言,斜杠串联(第一个)是最快的。

有关性能的更多详细信息,请参阅本测试用例

更新:

使用ES2015,我们可以利用其模板字符串功能。有了它,我们只需要使用反引号来创建多行字符串

例子:

 `<h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
  `

我想我发现了另一种方法,可以在没有任何侵入性语法的情况下,在每一行中内联执行。使用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://stackoverflow.com/a/5571069/916553

我认为这个解决方法应该适用于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>

干杯