我在Ruby中有以下代码.我想将此代码转换为JavaScript.什么是JS中的等效代码？
text = <<"HERE" This Is A Multiline String HERE
Anonymous.. 3007
ECMAScript 6(ES6)引入了一种新的文字,即模板文字.它们具有许多特征,可变插值等,但最重要的是,对于这个问题,它们可以是多线的.
模板文字由反引号分隔:
var html = `Some HTML here`;
(注意:我不主张在字符串中使用HTML)
浏览器支持是可以的,但您可以使用转换器更兼容.
Javascript没有here-document语法.但是,你可以逃避文字换行符:
"foo \ bar"
请注意:某些浏览器会在延续时插入换行符,有些则不会. (221认同)
@Nate在[ECMA-262第5版](http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf)第7.8.4节中规定并称为*LineContinuation*: "行终止符不能出现在字符串文字中,除非作为*LineContinuation*的一部分产生空字符序列.使行终止符字符成为字符串文字的字符串值的一部分的正确方法是使用转义序列,例如\n或\ u000A." (47认同)
Visual Studio 2010似乎也被这种语法搞糊涂了. (34认同)
当浏览器不一致地对待它时,我不明白为什么你会这样做.多行中的"line1 \n"+"line2"足够可读,并保证您的行为一致. (15认同)
"浏览器支持正常"...... IE11不支持 - 不行 (8认同)
总而言之,这似乎是最直接的方法,与所有浏览器兼容,至少回到IE6(可能更早),只要你不关心是否可以在每一行的末尾添加额外的换行符.有谁知道哪些浏览器/版本添加换行符,哪些没有？ (7认同)
这种语法非常适合永远不会在反斜杠和换行符之间放置空格的机器.其他人都必须将他们的代码粘贴到SO的评论编辑器中,以查看`\`和\之间突出显示的区别 (3认同)
`'line1'+'\n'`...这有什么问题？ (2认同)
这个解决方案并没有错 - 但显然不是最好的.很难过这里有如此高的数量.向下滚动以阅读更好的解决方案. (2认同)
Devin G Rhod.. 1253
正如第一个回答所提到的,使用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'
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.';
@MattBrowne谷歌的建议已经由他们记录,按照重要性的顺序:(1)每行开头的空白[在这个例子中,你不希望你的字符串中有空格,但它在代码中看起来更好](2)斜杠之后的空格会导致棘手的错误[如果你用'\`而不是'\\`结束一行很难注意到]和(3)虽然大多数脚本引擎支持这一点,但它不是ECMAScript [即为什么使用非标准功能？]记住它是一个样式指南,它使代码易于阅读+维护+调试:不只是"它工作"正确. (26认同)
我不明白谷歌的建议.除了极端旧的浏览器之外的所有浏览器都支持反斜杠后跟换行方法,并且将来会继续这样做以实现向后兼容性.你需要避免它的唯一一次是你需要确保在每一行的末尾添加一个且只有一个换行符(或没有换行符)(另请参阅我对已接受答案的评论). (19认同)
请注意,IE11,Firefox 31,Chrome 35或Safari 7不支持模板字符串.请参阅http://kangax.github.io/compat-table/es6/ (6认同)
KooiInc.. 665
这种模式text = <<"HERE" This Is A Multiline String HERE在js中不可用(我记得在我很好的旧Perl时代使用它).
为了保持对复杂或长多行字符串的监督,我有时使用数组模式:
var myString = ['', 'some content' ].join('\n');
', 'someRefTxt', '
或者匿名模式已经显示(转义换行符),这可能是代码中的一个丑陋的块:
var myString =
' \
some content
\
someRefTxt \
';
这是另一个奇怪但有效的'技巧' 1:
var myString = (function () {/*
some content
someRefTxt
*/}).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注意:在缩小/混淆代码后,这将丢失
ECMAScript 6(ES6)引入了一种新的文字,即模板文字.它们具有许多特征,可变插值等,但最重要的是,对于这个问题,它们可以是多线的.
模板文字由反引号分隔:
var html = `Some HTML here`;
(注意:我不主张在字符串中使用HTML)
浏览器支持是可以的,但您可以使用转换器更兼容.
Javascript没有here-document语法.但是,你可以逃避文字换行符:
"foo \ bar"
正如第一个回答所提到的,使用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'
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 = ['', 'some content' ].join('\n');
', 'someRefTxt', '
或者匿名模式已经显示(转义换行符),这可能是代码中的一个丑陋的块:
var myString =
' \
some content
\
someRefTxt \
';
这是另一个奇怪但有效的'技巧' 1:
var myString = (function () {/*
some content
someRefTxt
*/}).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
*/});
该方法已在以下浏览器中成功测试过(未提及=未测试):
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.
你可以这样做...
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)
我很惊讶我没有看到这个,因为它适用于我测试过的所有地方,对于例如模板非常有用:
有没有人知道有HTML的环境但它不起作用？
我通过输出div,使其隐藏,并在需要时通过jQuery调用div id来解决这个问题.
例如
Strings On Multiple Lines Here
然后,当我需要获取字符串时,我只使用以下jQuery:
$('#UniqueID').html();
这会在多行返回我的文字.如果我打电话
alert($('#UniqueID').html());
我明白了:
使用脚本标签:
将包含多行文字的块添加到head标记中;
按原样获取多行文本...(注意文本编码:UTF-8,ASCII)
有多种方法可以实现这一目标
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,我们可以利用其模板字符串功能.有了它,我们只需要使用反向标记来创建多行字符串
例:
`{{title}}
{{hero.name}} details!
{{hero.id}}{{hero.name}}`
我喜欢这种语法和压句:
string = 'my long string...\n'
+ 'continue here\n'
+ 'and here.';
(但实际上不能被视为多行字符串)
有这个图书馆使它美丽:
https://github.com/sindresorhus/multiline
var str = '' + '' + '' + ' ' + '? unicorns
' + ' ' + '' + '';
var str = multiline(function(){/*
? unicorns
*/});
Downvoters:此代码仅供参考.
这已经在Mac上的Fx 19和Chrome 24中进行了测试
DEMO
var new_comment; /*<<You $text 2d 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'));
总结一下,我在用户javascript编程中尝试了2种方法(Opera 11.01):
这个不起作用:在JavaScript中创建多行字符串
这工作得相当好,我也想出了如何在Notepad ++源视图中使它看起来很好:在JavaScript中创建多行字符串
所以我推荐Opera用户JS用户的工作方法.与作者所说的不同:
它不适用于Firefox或Opera; 仅适用于IE,Chrome和Safari.
它可以在Opera 11中运行.至少在用户JS脚本中.太糟糕了,我不能评论个别答案或提出答案,我会马上做.如果可能,有特权的人请为我做.
2015年更新:现在已经六年了:大多数人使用模块加载器,主模块系统都有加载模板的方法.它不是内联的,但最常见的多行字符串类型是模板,并且模板通常应该保留在JS之外.
使用require.js'text'插件,在template.html中使用多行模板
var template = require('text!template.html')
Browserify 使用'brfs'模块加载文本文件.这实际上会将您的模板构建到捆绑的HTML中.
var fs = require("fs");
var template = fs.readFileSync(template.html', 'utf8');
简单.
如果您愿意使用转义换行符,可以很好地使用它们. 它看起来像带有页面边框的文档.
这适用于IE,Safari,Chrome和Firefox:
我对/sf/ask/17360801/的扩展.它希望以/*! 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() { /*!
*/}.extractComment();
javascript中的等价物是:
var text = ` This Is A Multiline String `;
这是规范.请参阅本页底部的浏览器支持.这里有一些例子.
您可以使用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变体中的多行字符串对象,您可以将模板放入另一个文件(可以在捆绑包中合并).
您可以在http://www.typescriptlang.org/Playground上尝试TypeScript
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/docs/Web/JavaScript/Reference/Template_literals
ES6的实现方式是使用模板文字：
const str = `This is a multiline text`; console.log(str);
在这里更多参考
![`[AnyObject]`到NSMutableArray](https://img.devbox.cn/3cccf/16086/243/8e8f4e2f18ab13a1.png)
京公网安备 11010802040832号 | 京ICP备19059560号-6 
