在JavaScript中创建多行字符串

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

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

#1楼

我通过输出div使其隐藏并在需要时通过jQuery调用div id来解决此问题。

例如

<div id="UniqueID" style="display:none;">
     Strings
     On
     Multiple
     Lines
     Here
</div>

然后,当我需要获取字符串时,只需使用以下jQuery:

$('#UniqueID').html();

这会在多行上返回我的文本。 如果我打电话

alert($('#UniqueID').html());

我得到:

在此处输入图片说明


#2楼

使用脚本标签:

  • head标签中添加一个包含多行文本的<script>...</script>块;
  • 按原样获取多行文本...(请注意文本编码:UTF-8,ASCII)

     <script> // pure javascript var text = document.getElementById("mySoapMessage").innerHTML ; // using JQuery's document ready for safety $(document).ready(function() { var text = $("#mySoapMessage").html(); }); </script> <script id="mySoapMessage" type="text/plain"> <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:typ="..."> <soapenv:Header/> <soapenv:Body> <typ:getConvocadosElement> ... </typ:getConvocadosElement> </soapenv:Body> </soapenv:Envelope> <!-- this comment will be present on your string --> //uh-oh, javascript comments... SOAP request will fail </script> 

#3楼

刚刚尝试了匿名答案,发现这里有一个小窍门,如果反斜杠后有空格,它就不起作用了\\
因此以下解决方案不起作用-

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);​

希望能帮助到你 !!


#4楼

我认为这个解决方法应该可以在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>

干杯!!


#5楼

Downvoters :此代码仅供参考。

已在Mac上的Fx 19和Chrome 24中测试过

演示

var new_comment; /*<<<EOF 
    <li class="photobooth-comment">
       <span class="username">
          <a href="#">You</a>
       </span>
       <span class="comment-text">
          $text
       </span>
       <span class="comment-time">
          2d
       </span>
    </li>
EOF*/
// note the script tag here is hardcoded as the FIRST tag 
new_comment=document.currentScript.innerHTML.split("EOF")[1]; 
alert(new_comment.replace('$text','Here goes some text'));

#6楼

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

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)

#7楼

我针对字符串concat的基于数组的连接版本:

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个项目的字符串数组来说是很好的-我将避免使用大型数组的索引添加。


#8楼

我对https://stackoverflow.com/a/15558082/80404的扩展。 它期望以/*! any multiline comment */形式进行注释/*! any multiline comment */ /*! 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();

#9楼

您可以使用+=来连接您的字符串,似乎没有人回答,这将是可读的,而且也很整洁。

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

也可以写成

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

console.log(hello);

#10楼

2015年更新 :六年后:大多数人都使用模块加载器,每个主模块系统都有加载模板的方式。 它不是内联的,但是最常见的多行字符串类型是模板,并且无论如何模板通常都应该放在JS之外

require.js:“需要文本”。

使用require.js'text'插件 ,并在template.html中使用多行模板

var template = require('text!template.html')

NPM / browserify:“ brfs”模块

Browserify 使用“ brfs”模块加载文本文件。 这实际上会将您的模板构建到捆绑的HTML中。

var fs = require("fs");
var template = fs.readFileSync(template.html', 'utf8');

简单。


#11楼

有一个使它漂亮的库:

https://github.com/sindresorhus/multiline

之前

var str = '' +
'<!doctype html>' +
'<html>' +
'   <body>' +
'       <h1>❤ unicorns</h1>' +
'   </body>' +
'</html>' +
'';

var str = multiline(function(){/*
<!doctype html>
<html>
    <body>
        <h1>❤ unicorns</h1>
    </body>
</html>
*/});

#12楼

有多种方法可以实现这一目标

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('');

在性能方面, Slash串联 (第一个)是最快的。

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

更新:

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

例:

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

#13楼

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

在此处输入图片说明


#14楼

您可以使用TypeScript (JavaScript SuperSet),它支持多行字符串,并且可以将其转换回纯JavaScript,而不会产生开销:

var templates = {
    myString: `this is
a multiline
string` 
}

alert(templates.myString);

如果您想使用纯JavaScript完成相同的操作:

var templates = 
{
 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(templates.myString)

请注意,iPad / Safari不支持'functionName.toString()'

如果您有很多旧代码,则还可以在TypeScript中使用纯JavaScript变体(用于清理):

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

并且您可以使用普通JavaScript变体中的multiline-string对象,在该对象中,您可以将模板放入另一个文件(可以合并到分发包中)。

您可以在以下位置尝试TypeScript
http://www.typescriptlang.org/Playground


#15楼

javascript中的等效项是:

var text = `
This
Is
A
Multiline
String
`;

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


#16楼

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


#17楼

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

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

#18楼

这适用于IE,Safari,Chrome和Firefox:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div class="crazy_idea" thorn_in_my_side='<table  border="0">
                        <tr>
                            <td ><span class="mlayouttablecellsdynamic">PACKAGE price $65.00</span></td>
                        </tr>
                    </table>'></div>
<script type="text/javascript">
    alert($(".crazy_idea").attr("thorn_in_my_side"));
</script>

#19楼

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

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

#20楼

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

例:

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


#21楼

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

const str = `This 

is 

a

multiline text`; 

console.log(str);

在这里更多参考


#22楼

在Javascrips中制作多行字符串的最简单方法是使用反引号(``)。 这使您可以创建多行字符串,在其中可以使用${variableName}插入变量。

例:

 let name = 'Willem'; let age = 26; let multilineString = ` my name is: ${name} my age is: ${age} `; console.log(multilineString); 

相容性:

  • ES6中引入// // es2015
  • 现在,所有主要的浏览器供应商(Internet Explorer除外)都对它进行本地支持。

在此处检查Mozilla文档中的确切兼容性


#23楼

可以在纯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


#24楼

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

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

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

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


#25楼

ES6更新:

如第一个答案所述,使用ES6 / Babel,您现在只需使用反引号即可创建多行字符串:

const htmlString = `Say hello to 
multi-line
strings!`;

插值变量是流行的新功能,带有反引号分隔的字符串:

const htmlString = `${user.name} liked your post about strings`;

这只是转换为串联:

user.name + ' liked your post about strings'

ES5原始答案:

Google的JavaScript样式指南建议使用字符串串联而不是换行符:

不要这样做:

 var myString = 'A rather long string of English text, an error message \\ actually that just keeps going and going -- an error \\ message to make the Energizer bunny blush (right through \\ those Schwarzenegger shades)! Where was I? Oh yes, \\ you\\'ve got an error and all the extraneous whitespace is \\ just gravy. Have a nice day.'; 

在编译时不能安全地剥离每行开头的空白; 斜杠后的空格将导致棘手的错误; 尽管大多数脚本引擎都支持此功能,但它不是ECMAScript的一部分。

请使用字符串串联:

 var myString = 'A rather long string of English text, an error message ' + 'actually that just keeps going and going -- an error ' + 'message to make the Energizer bunny blush (right through ' + 'those Schwarzenegger shades)! Where was I? Oh yes, ' + 'you\\'ve got an error and all the extraneous whitespace is ' + 'just gravy. Have a nice day.'; 

#26楼

你可以这样做...

var string = 'This is\n' +
'a multiline\n' + 
'string';

#27楼

更新:

ECMAScript 6(ES6)引入了一种新型的文字,即模板文字 。 它们具有许多功能,其中包括变量插值,但对于这个问题最重要的是,它们可以是多行的。

模板文字由反引号分隔:

var html = `
  <div>
    <span>Some HTML here</span>
  </div>
`;

(注意:我不主张在字符串中使用HTML)

浏览器支持还可以 ,但是您可以使用编译器来更好地兼容。


ES5原始答案:

Javascript没有here-document语法。 但是,您可以转义文字换行符,该换行符很接近:

"foo \
bar"

#28楼

模式text = <<"HERE" This Is A Multiline String HERE在js中不可用(我记得在Perl过去的美好时光中经常使用它)。

为了对复杂或较长的多行字符串进行监督,有时会使用数组模式:

var myString = 
   ['<div id="someId">',
    'some content<br />',
    '<a href="#someRef">someRefTxt</a>',
    '</div>'
   ].join('\n');

或已经显示的匿名模式(转义换行符),这可能是代码中的丑陋块:

    var myString = 
       '<div id="someId"> \
some content<br /> \
<a href="#someRef">someRefTxt</a> \
</div>';

这是另一个奇怪但有效的“技巧” 1

var myString = (function () {/*
   <div id="someId">
     some content<br />
     <a href="#someRef">someRefTxt</a>
    </div>        
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];

外部编辑: jsfiddle

ES20xx支持使用模板字符串跨越多行字符串

let str = `This is a text
    with multiple lines.
    Escapes are interpreted,
    \n is a newline.`;
let str = String.raw`This is a text
    with multiple lines.
    Escapes are not interpreted,
    \n is not a newline.`;

1注意:缩小/混淆代码后,这将会丢失


#29楼

我喜欢这种语法和倾向:

string = 'my long string...\n'
       + 'continue here\n'
       + 'and here.';

(但实际上不能视为多行字符串)


#30楼

令我惊讶的是,我没有看到它,因为它在我测试过的所有地方都有效,并且对于例如模板非常有用:

<script type="bogus" id="multi">
    My
    multiline
    string
</script>
<script>
    alert($('#multi').html());
</script>

有人知道存在HTML但无法使用HTML的环境吗?

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值