在JavaScript中创建多行字符串

JavaScript

凯飞云西里

2020-03-09

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

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

第179篇《在JavaScript中创建多行字符串》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共11个回答
泡芙Gil 2020.03.09

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

<!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

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

例：

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

猿路易 2020.03.09

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

var string = "line1\  // comment, space or tabs here raise error
line2";
A猪猪 2020.03.09

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

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

const str = `This 

is 

a

multiline text`; 

console.log(str);

在这里更多参考

达蒙西里 2020.03.09

javascript中的等效项是：

var text = `
This
Is
A
Multiline
String
`;

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

飞云乐 2020.03.09

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

在此处输入图片说明

神乐蛋蛋 2020.03.09

我对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();
TomGreen 2020.03.09

总结一下，我已经尝试了用户javascript编程（Opera 11.01）中列出的2种方法：

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

它不适用于Firefox或Opera；仅适用于IE，Chrome和Safari。

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

十三西里GO 2020.03.09

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

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

您可以在纯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字符串方法...;）

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android