Q
I have the following code in Ruby. I want to convert this code into JavaScript. what’s the equivalent code in JS?
text = <<"HERE"
This
Is
A
Multiline
String
HERE
A-1
ECMAScript 6 (ES6) introduces a new type of literal, namely template literals. They have many features, variable interpolation among others, but most importantly for this question, they can be multiline.
ECMAScript 6(ES6)引入了一种新型的文字,即
模板文字
。它们具有许多功能,其中包括变量插值,但对于这个问题最重要的是,它们可以是多行的。
A template literal is delimited by backticks:
模板文字由反引号分隔:
var html = `
<div>
<span>Some HTML here</span>
</div>
`;
(Note: I’m not advocating to use HTML in strings)
(注意:我不主张在字符串中使用HTML)
A-2
As the first answer mentions, with ES6/Babel, you can now create multi-line strings simply by using backticks:
如第一个答案所述,使用ES6 / Babel,您现在只需使用反引号即可创建多行字符串:
const htmlString = `Say hello to
multi-line
strings!`;
Interpolating variables is a popular new feature that comes with back-tick delimited strings:
插值变量是流行的新功能,带有反引号分隔的字符串:
const htmlString = `${
user.name} liked your post about strings`;
This just transpiles down to concatenation:
这只是转换为串联:
user.name + ' liked your post about strings'
Original ES5 answer:
ES5原始答案:
Google’s JavaScript style guide recommends to use string concatenation instead of escaping newlines:
Google的JavaScript样式指南
建议使用字符串串联而不是换行符:
Do not do this:
不要这样做:
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.';
The whitespace at the beginning of each line can’t be safely stripped at compile time; whitespace after the slash will result in tricky errors; and while most script engines support this, it is not part of ECMAScript.
在编译时不能安全地剥离每行开头的空白;斜杠后的空格将导致棘手的错误;尽管大多数脚本引擎都支持此功能,但它不是ECMAScript的一部分。
Use string concatenation instead:
请使用字符串串联:
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.';
A-3
the pattern text = <<"HERE" This Is A Multiline String HERE
is not available in js (I remember using it much in my good old Perl days).
该模式
text = <<"HERE" This Is A Multiline String HERE
在js中不可用(我记得我在Perl的美好时光中经常使用它)。
To keep oversight with complex or long multiline strings I sometimes use an array pattern:
为了对复杂或较长的多行字符串进行监督,有时会使用数组模式:
var myString =
['<div id="someId">',
'some content<br />',
'<a href="#someRef">someRefTxt</a>',
'</div>'
].join('\n');
or the pattern anonymous already showed (escape newline), which can be an ugly block in your code:
或已经显示的匿名模式(换行符),这可能是代码中的丑陋块:
var myString =
'<div id="someId"> \
some content<br /> \
<a href="#someRef">someRefTxt</a> \
</div>';
Here’s another weird but working 'trick’1:
这是另一个奇怪但有效的“技巧” 1:
var myString = (function () {
/*
<div id="someId">
some content<br />
<a href="#someRef">someRefTxt</a>
</div>
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];
ES20xx supports spanning strings over multiple lines using template strings:
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 Note: this will be lost after minifying/obfuscating your code
1注意:缩小/混淆代码后,这将会丢失
A-4
141
I came up with this very jimmy rigged method of a multi lined string. Since converting a function into a string also returns any comments inside the function you can use the comments as your string using a multilined comment /**/. You just have to trim off the ends and you have your 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)