创造多行串JavaScript
https://stackoverflow.com/questions/805107
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我有以下代码红宝石。我想把这个代码转JavaScript。什么同等码在JS?
text = <<"HERE"
This
Is
A
Multiline
String
HERE
解决方案
更新
ECMAScript 6（ES6）引入了一种新类型的文字，即 模板文字 。它们具有许多特征，其中包括可变插值，但最重要的是，对于这个问题，它们可以是多线的。
模板文字由反引号分隔：
var html = `
<div>
<span>Some HTML here</span>
</div>
`;
（注意：我不主张在字符串中使用HTML）
浏览器支持可以，但您可以使用 transpilers 更兼容。
原ES5答案：
Javascript没有here-document语法。但是，你可以逃避文字换行符，它接近：
"foo \
bar"
其他提示
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.';
模式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 注意：在缩小/混淆代码后，这将丢失
你的 可以 有多行串在纯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)
- Safari4-6(不在3)
- 铬1-45
- Firefox17-21(不在16-)
- Rekonq0.7.0中-0.8.0
- 不支持通4.7.4
小心你的压缩器压缩，虽然。它倾向于删除的意见。的 衣压缩机, 一评论的开始 /*! (一样，我使用)将被保留。
我想一个 真的 解决办法是使用 抑.
你可以这样做......
var string = 'This is\n' +
'a multiline\n' +
'string';
我想出了这种多线式弦乐器的装配方法。由于将函数转换为字符串也会返回函数内的任何注释，您可以使用多行注释/ ** /将注释用作字符串。你只需要修剪两端，你就有了你的字符串。
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)
我很惊讶我没有看到这一点，因为它在我测试它的任何地方都有用，并且对于例如它非常有用。模板：
<script type="bogus" id="multi">
My
multiline
string
</script>
<script>
alert($('#multi').html());
</script>
是否有人知道有HTML的环境但它不起作用？
我通过输出div，使其隐藏，并在需要时通过jQuery调用div id来解决这个问题。
e.g。
<div id="UniqueID" style="display:none;">
Strings
On
Multiple
Lines
Here
</div>
然后当我需要获取字符串时，我只使用以下jQuery：
$('#UniqueID').html();
这会在多行返回我的文字。如果我打电话
alert($('#UniqueID').html());
我明白了：
有多种方法可以实现这个目标
<强> 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 concatenation （第一个）是最快的。
请参阅 此测试用例，了解有关性能的详细信息
<强>更新
使用 ES2015 ，我们可以利用其模板字符串功能。有了它，我们只需要使用反向标记来创建多行字符串
示例：
`<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div><label>name: </label>{{hero.name}}</div>
`
用脚本标签:
- 增加一个
<script>...</script>块包含多行的文本进入head标签； 让你的多行案文是...(注意文本编码：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>
我喜欢这种语法和缩进：
string = 'my long string...\n'
+ 'continue here\n'
+ 'and here.';
（但实际上不能被视为多行字符串）
这个图书馆让它美丽：
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>
*/});
Downvoters ：此代码仅供参考。
这已经在Fx 19和Mac上的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'));
总之，我们试图2的办法在这里列出用户的javascript编程(歌剧的11.01):
- 这个没有的工作： 创造多行串JavaScript
- 这一工作相当好，我也已经想出如何使它看起来很好的记事本++源查看： 创造多行串JavaScript
所以我建议的工作方法剧户JS用户。不像什么提交人的说法：
它不工作上的火狐或歌剧;只有在即，铬和野生动物园。
它的工作在歌剧11.至少在用户JS脚本。太糟糕了我不能评论在单个的答案，或者投票的回答，我就会这样做。如果可能的，有人有更高的权限的请为我做的。
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');
易。
如果您愿意使用转义换行符，可以使用。 它看起来像带有页面边框的文档。
适用于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>
我对 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();
您可以使用 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变体中的多行字符串对象，您可以将模板放入另一个文件（可以在捆绑包中合并）。
您可以在
尝试TypeScript
http://www.typescriptlang.org/Playground
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/en -US /文档/网络/ JavaScript的/参考/ Template_literals
最简单的方法，使多行串Javascrips是与使用反引号(`).这可以让你创造多行串可以在其中插入变量 ${variableName}.
例如：
let name = 'Willem';
let age = 26;
let multilineString = `
my name is: ${name}
my age is: ${age}
`;
console.log(multilineString);兼容性：
- 它介绍了在
ES6//es2015 - 它现在是自行支持通过所有主要的浏览器供应商(除了互联网浏览器)
我的基于数组的字符串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个项目 - 我会避免它支持更大数组的索引添加。
您可以使用+=来连接您的字符串，似乎没有人回答，这将是可读的，而且还很整洁......这样的事情
var hello = 'hello' +
'world' +
'blah';
也可以写成
var hello = 'hello';
hello += ' world';
hello += ' blah';
console.log(hello);
另外要注意的是，当在每行末尾使用正向反斜杠将字符串扩展到多行时，在前向反斜杠之后的任何多余字符（大多数是空格，制表符和错误添加的注释）都会导致意外的字符错误，我带了一个小时找出
var string = "line1\ // comment, space or tabs here raise error
line2";
请热爱互联网使用字符串连接，并选择不使用ES6解决方案。全面支持ES6，就像CSS3和某些浏览器慢慢适应CSS3运动一样。使用普通的'JavaScript，你的最终用户会感谢你。
示例：
var str = "This world is neither flat nor round. "+
"Once was lost will be found";
您必须使用连接运算符'+'。
<!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.
我认为这种解决方法应该适用于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>
干杯!!
刚刚尝试过Anonymous的答案，发现这里有一个小技巧，如果反斜杠之后有空格，它就不起作用\
所以以下解决方案不起作用 -
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);
希望它有所帮助!!
