我需要JavaScript中的Heredoc之类的东西。您对此有什么想法吗?我需要跨浏览器功能。
我找到了这个:
heredoc = '\
<div>\
<ul>\
<li><a href="#zzz">zzz</a></li>\
</ul>\
</div>';
我认为它将为我工作。:)
我需要JavaScript中的Heredoc之类的东西。您对此有什么想法吗?我需要跨浏览器功能。
我找到了这个:
heredoc = '\
<div>\
<ul>\
<li><a href="#zzz">zzz</a></li>\
</ul>\
</div>';
我认为它将为我工作。:)
Answers:
尝试使用ES6字符串模板,您可以执行以下操作
var hereDoc = `
This
is
a
Multiple
Line
String
`.trim()
hereDoc == 'This\nis\na\nMultiple\nLine\nString'
=> true
您现在可以通过6to5或TypeScript使用此强大功能
不,不幸的是,JavaScript不支持Heredoc之类的东西。
这个怎么样:
function MyHereDoc(){
/*HERE
<div>
<p>
This is written in the HEREDOC, notice the multilines :D.
</p>
<p>
HERE
</p>
<p>
And Here
</p>
</div>
HERE*/
var here = "HERE";
var reobj = new RegExp("/\\*"+here+"\\n[\\s\\S]*?\\n"+here+"\\*/", "m");
str = reobj.exec(MyHereDoc).toString();
str = str.replace(new RegExp("/\\*"+here+"\\n",'m'),'').toString();
return str.replace(new RegExp("\\n"+here+"\\*/",'m'),'').toString();
}
//Usage
document.write(MyHereDoc());
只需将“ / * HERE”和“ HERE * /”替换为选择词即可。
*/
的Heredoc中有结束语,将无法使用。
基于Zv_oDD的答案,我创建了一个类似的函数来简化重用。
警告:这是许多JS解释器的非标准功能,可能会在某些时候被删除,但是由于我正在构建仅在Chrome中使用的脚本,因此我正在使用它!永远不要依赖于面向客户的网站!
// Multiline Function String - Nate Ferrero - Public Domain
function heredoc(fn) {
return fn.toString().match(/\/\*\s*([\s\S]*?)\s*\*\//m)[1];
};
用:
var txt = heredoc(function () {/*
A test of horrible
Multi-line strings!
*/});
返回值:
"A test of horrible
Multi-line strings!"
笔记:
编辑:
2014年2月2日-更改为完全不干扰Function原型,并改用heredoc这个名称。
5/26/2017-更新了空白以反映现代编码标准。
ES6 模板字符串具有heredoc功能。
您可以声明反引号(`)括起来的字符串,并且可以通过多行扩展。
var str = `This is my template string...
and is working across lines`;
您还可以在模板字符串中包含表达式。这些以美元符号和大括号(${expression}
)表示。
var js = "Java Script";
var des = `Template strings can now be used in ${js} with lot of additional features`;
console.log(des); //"Template strings can now be used in Java Script with lot of additional features"
实际上,其中还有更多功能,例如标记的寺庙弦乐和原始弦乐。请在以下位置找到文档
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings
对于仅扩展@NateFerrero的答案,我写一个单独的答案感到很遗憾,但是我也不认为编辑他的答案也很合适,所以如果此答案对您有用,请投票@NateFerrero。
我主要需要Javascript heredocs来存储CSS块,例如
var css = heredoc(function() {/*
/**
* Nuke rounded corners.
*/
body div {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
*/});
但是,正如您所看到的,我喜欢对CSS进行注释,但不幸的是(如语法突出显示所示),第一个*/
注释结束了整个注释,破坏了Heredoc。
为此,我的解决方法是添加
.replace(/(\/\*[\s\S]*?\*) \//g, '$1/')
到@NateFerrero内的链heredoc
;完整形式:
function heredoc (f) {
return f.toString().match(/\/\*\s*([\s\S]*?)\s*\*\//m)[1].replace(/(\/\*[\s\S]*?\*) \//g, '$1/');
};
并通过在*
和之间/
为“内部”块注释添加一个空格来使用它,如下所示:
var css = heredoc(function() {/*
/**
* Nuke rounded corners.
* /
body div {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
*/});
在replace
简单地找到/* ... * /
并删除的空间,使/* ... */
,从而保持定界符直到调用。
您当然可以使用删除全部评论
.replace(/\/\*[\s\S]*?\* \//g, '')
//
如果将注释添加到链中,则还可以支持注释:
.replace(/^\s*\/\/.*$/mg, '')
另外,除了*
和之间的单个空格,您还可以执行其他操作/
,例如-
:
/**
* Nuke rounded corners.
*-/
如果您只是适当地更新了正则表达式:
.replace(/(\/\*[\s\S]*?\*)-\//g, '$1/')
^
还是您想使用任意数量的空格而不是单个空格?
.replace(/(\/\*[\s\S]*?\*)\s+\//g, '$1/')
^^^
您可以使用CoffeeScript,这是一种可编译为JavaScript的语言。该代码一对一地编译成等效的JS,并且在运行时没有解释。
当然,它具有heredocs :)
您可以使用Sweet.js Macros来添加它,就像蒂姆·迪斯尼在本文中创建的那样
请注意,此方法改用反引号作为字符串定界符:
let str = macro {
case {_ $template } => {
var temp = #{$template}[0];
var tempString = temp.token.value.raw;
letstx $newTemp = [makeValue(tempString, #{here})];
return #{$newTemp}
}
}
str `foo bar baz`
正如其他人所说,ES6模板字符串为您提供了传统的Heredocs提供的大多数功能。
如果您想更进一步并使用带标签的模板字符串,那么它theredoc
是一个很好的实用程序函数,可让您执行以下操作:
if (yourCodeIsIndented) {
console.log(theredoc`
Theredoc will strip the
same amount of indentation
from each line.
You can still indent
further if you want.
It will also chop off the
whitespace-only first and
last lines.
`)
}
如果您手头有一些html和jQuery,并且字符串是有效的HTML,则这可能会很有用:
<div id="heredoc"><!--heredoc content
with multiple lines, even 'quotes' or "double quotes",
beware not to leave any tag open--></div>
<script>
var str = (function() {
var div = jQuery('#heredoc');
var str = div.html();
str = str.replace(/^<\!--/, "").toString();
str = str.replace(/-->$/, "").toString();
return str;
})();
</script>
如果文本之间有注释“ <!-->”,它也可以正常工作,但是部分文本可能是可见的。这是小提琴:https : //jsfiddle.net/hr6ar152/1/
// js heredoc - http://stackoverflow.com/a/32915549/466363
// a function with comment with eval-able string, use it just like regular string
function extractFuncCommentString(func,comments) {
var matches = func.toString().match(/function\s*\(\)\s*\{\s*\/\*\!?\s*([\s\S]+?)\s*\*\/\s*\}/);
if (!matches) return undefined;
var str=matches[1];
// i have made few flavors of comment removal add yours if you need something special, copy replacement lines from examples below, mix them
if(comments===1 )
{
// keep comments, in order to keep comments you need to convert /**/ to / * * / to be able to put them inside /**/ like /* / * * / */
return (
str
.replace(/\/\s\*([\s\S]*?)\*\s\//g,"/*$1*/") // change / * text * / to /* text */
)
}
else if(comments===2)
{
// keep comments and replace singleline comment to multiline comment
return (
str
.replace(/\/\s\*([\s\S]*?)\*\s\//g,"/*$1*/") // change / * text * / to /* text */
.replace(/\/\/(.*)/g,"/*$1*/") // change //abc to /*abc*/
)
}
else if(comments===3)
{
// remove comments
return (
str
.replace(/\/\s\*([\s\S]*?)\*\s\//g,"") // match / * abc * /
.replace(/\/\/(.*)/g,"") // match //abc
)
}
else if(comments===4)
{
// remove comments and trim and replace new lines with escape codes
return (
str
.replace(/\/\s\*([\s\S]*?)\*\s\//g,"") // match / * abc * /
.replace(/\/\/(.*)/g,"") // match //abc
.trim() // after removing comments trim and:
.replace(/\n/g,'\\n').replace(/\r/g,'\\r') // replace new lines with escape codes. allows further eval() of the string, you put in the comment function: a quoted text but with new lines
)
}
else if(comments===5)
{
// keep comments comments and replace strings, might not suit when there are spaces or comments before and after quotes
// no comments allowed before quotes of the string
return (
str
.replace(/\/\s\*([\s\S]*?)\*\s\//g,"/*$1*/") // change / * text * / to /* text */
.replace(/\/\/(.*)/g,"/*$1*/") // change //abc to /*abc*/
.trim() // trim space around quotes to not escape it and:
.replace(/\n/g,'\\n').replace(/\r/g,'\\r') // replace new lines with escape codes. allows further eval() of the string, you put in the comment function: a quoted text but with new lines
)
}
else
return str
}
例
var week=true,b=123;
var q = eval(extractFuncCommentString(function(){/*!
// this is a comment
'select
/ * this
is a multiline
comment * /
a
,b // this is a comment
,c
from `table`
where b='+b+' and monthweek="'+(week?'w':'m')+'"
//+' where a=124
order by a asc
'
*/},4));
带缓存:-制作一个简单的模板函数,然后保存该函数:(第二次工作很快)
var myfunction_sql1;
function myfunction(week,a){
if(!myfunction_sql1) eval('myfunction_sql1=function(week,a){return ('+extractFuncCommentString(function(){/*!
'select
/ * this
is a multiline
comment * /
a
,b // this is a comment
,c
from `table`
where b='+b+' and monthweek="'+(week?'w':'m')+'"
//+' where a=124
order by a asc
'*/},4)+')}');
q=myfunction_sql1(week,a);
console.log(q)
}
myfunction(true,1234)
我发布此版本是因为它避免了将正则表达式用于如此琐碎的事情。
恕我直言,正则表达式是Perl开发人员中的一个玩笑,是一种混淆。社区中的其他人认真对待它们,几十年后,我们现在付出了代价。不要使用正则表达式,除了与旧代码的向后兼容性。如今,没有任何借口来编写无法立即被人类理解和理解的代码。正则表达式在每个级别都违反了这一原则。
我还添加了一种将结果添加到当前页面的方法,而不是要求这样做。
function pretty_css () {
/*
pre { color: blue; }
*/
}
function css_src (css_fn) {
var css = css_fn.toString();
css = css.substr(css.indexOf("/*")+2);
return css.substr(0,css.lastIndexOf("*/")).trim();
}
function addCss(rule) {
let css = document.createElement('style');
css.type = 'text/css';
if (css.styleSheet) css.styleSheet.cssText = rule; // Support for IE
else css.appendChild(document.createTextNode(rule)); // Support for the rest
document.getElementsByTagName("head")[0].appendChild(css);
}
addCss(css_src(pretty_css));
document.querySelector("pre").innerHTML=css_src(pretty_css);
<pre></pre>