javascript - js字符串中变量 - js字符串中引用变量
在JavaScript中创建多行字符串 (20)
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.';
我在Ruby中有以下代码。 我想将此代码转换为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"
javascript中的等价物是:
var text = `
This
Is
A
Multiline
String
`;
这是specification 。 请参阅本页底部的浏览器支持。 这里有一些examples 。
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'));
你可以这样做...
var string = 'This is\n' +
'a multiline\n' +
'string';
使用脚本标签:
- 将包含多行文本的
<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>
如果您恰好在Node中运行,则可以使用fs模块从文件中读取多行字符串:
var diagram;
var fs = require('fs');
fs.readFile( __dirname + '/diagram.txt', function (err, data) {
if (err) {
throw err;
}
diagram = data.toString();
});
如果您愿意使用转义换行符,可以很好地使用它们。 它看起来像带有页面边框的文档 。
您可以在纯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-)
- Chrome 1 - 45
- Firefox 17 - 21( 不是16- )
- Rekonq 0.7.0 - 0.8.0
- Konqueror 4.7.4不支持
但是要小心你的缩放器。 它往往会删除评论。 对于YUI压缩器 ,以/*!
开头的注释/*!
(就像我用的那个)将被保留。
我认为真正的解决方案是使用CoffeeScript 。
您可以使用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
TypeScript
您必须使用连接运算符“+”。
<!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.
我喜欢这种语法和压句:
string = 'my long string...\n'
+ 'continue here\n'
+ 'and here.';
(但实际上不能被视为多行字符串)
我很惊讶我没有看到这个,因为它适用于我测试过的所有地方,对于例如模板非常有用:
<script type="bogus" id="multi">
My
multiline
string
</script>
<script>
alert($('#multi').html());
</script>
有没有人知道有HTML的环境但它不起作用?
我想出了这种多线式弦乐器的装配方法。 由于将函数转换为字符串也会返回函数内的任何注释,您可以使用多行注释/ ** /将注释用作字符串。 你只需要修剪两端,你就有了你的字符串。
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)
我认为这个解决方法应该适用于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>
干杯!!
我通过输出div,使其隐藏,并在需要时通过jQuery调用div id来解决这个问题。
例如
<div id="UniqueID" style="display:none;">
Strings
On
Multiple
Lines
Here
</div>
然后,当我需要获取字符串时,我只使用以下jQuery:
$('#UniqueID').html();
这会在多行返回我的文字。 如果我打电话
alert($('#UniqueID').html());
我明白了:
有这个图书馆让它美丽:
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>
*/});
模式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
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注意:在缩小/混淆代码后,这将丢失
这适用于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>
刚刚尝试了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);
希望能帮助到你 !!