在JavaScript中创建多行字符串

我在Ruby中有以下代码。我想将此代码转换为JavaScript。JS中的等效代码是什么?

text = <<"HERE"
This
Is
A
Multiline
String
HERE
泡芙Gil2020/03/09 17:20:25

您必须使用串联运算符“ +”。

<!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您的源代码,您将看起来像-

这个 
 <br>是
 <br>多行
 <br>字符串。

通过使用<br>浏览器,输出看起来像-

这个
多行
串。
宝儿猪猪2020/03/09 17:20:25

为了对互联网的热爱,请使用字符串串联,并选择不为此使用ES6解决方案。ES6并非全面支持,就像CSS3一样,某些浏览器适应CSS3的速度很慢。使用普通的JavaScript,您的最终用户将感谢您。

例:

var str = "This world is neither flat nor round. "+ "Once was lost will be found";

猿路易2020/03/09 17:20:25

还要注意,当在每行末尾使用正斜杠将字符串扩展到多行时,正斜杠后的任何多余字符(通常是空格,制表符和错误添加的注释)都会导致意外的字符错误,我花了一个小时才找到出

var string = "line1\  // comment, space or tabs here raise error
line2";
A猪猪2020/03/09 17:20:25

ES6允许您使用反引号在多行上指定字符串。它称为模板文字。像这样:

var multilineString = `One line of text
    second line of text
    third line of text
    fourth line of text`;

使用反引号可在NodeJS中使用,Chrome,Firefox,Edge,Safari和Opera支持该反引号。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Template_literals

老丝村村2020/03/09 17:20:25

ES6的实现方式是使用模板文字:

const str = `This 

is 

a

multiline text`; 

console.log(str);

在这里更多参考

达蒙西里2020/03/09 17:20:25

javascript中的等效项是:

var text = `
This
Is
A
Multiline
String
`;

这是规格请参阅此页面底部的浏览器支持这里也有一些例子

飞云乐2020/03/09 17:20:25

如果您愿意使用转义的换行符,可以很好地使用它们它看起来像带有页面边框的文档

在此处输入图片说明

神乐蛋蛋2020/03/09 17:20:25

我对https://stackoverflow.com/a/15558082/80404的扩展它期望以/*! any multiline comment */符号形式的注释用于防止缩小(至少对于YUI压缩机而言)

Function.prototype.extractComment = function() {
    var startComment = "/*!";
    var endComment = "*/";
    var str = this.toString();

    var start = str.indexOf(startComment);
    var end = str.lastIndexOf(endComment);

    return str.slice(start + startComment.length, -(str.length - end));
};

例:

var tmpl = function() { /*!
 <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
    </ul>
 </div>
*/}.extractComment();
TomGreen2020/03/09 17:20:25

总结一下,我已经尝试了用户javascript编程(Opera 11.01)中列出的2种方法:

因此,我为Opera用户JS用户推荐了一种工作方法。与作者所说的不同:

它不适用于Firefox或Opera;仅适用于IE,Chrome和Safari。

它确实在Opera 11中起作用。至少在用户JS脚本中。太糟糕了,我无法对单个答案发表评论或对答案进行投票,我会立即这样做。如果可能的话,请具有较高特权的人替我做。

十三西里GO2020/03/09 17:20:24

我想出了多行字符串的这种非常笨拙的操纵方法。由于将函数转换为字符串还会返回该函数内部的所有注释,因此您可以使用多行注释/ ** /将注释用作字符串。您只需要修剪两端就可以了。

var myString = function(){/*
    This is some
    awesome multi-lined
    string using a comment 
    inside a function 
    returned as a string.
    Enjoy the jimmy rigged code.
*/}.toString().slice(14,-3)

alert(myString)
达蒙阿飞斯丁2020/03/09 17:20:24

可以在纯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
*/});

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

  • IE 4-10
  • Opera 9.50-12(不在9-中)
  • Safari 4-6(不在3中)
  • 镀铬1-45
  • Firefox 17-21不在16-中
  • Rekonq 0.7.0-0.8.0
  • Konqueror 4.7.4不支持

但是,请小心您的缩小器。它倾向于删除评论。对于YUI压缩器/*!将保留开头)开头的注释

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

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

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

那会很酷。有人应该写这个.removeIndentation字符串方法...;)