Javascriptヒアドキュメント
JavaScriptでheredocのようなものが必要です。これについて何かアイデアはありますか？クロスブラウザ機能が必要です。
私はこれを見つけました：
heredoc = '\
<div>\
<ul>\
<li><a href="#zzz">zzz</a></li>\
</ul>\
</div>';
私にとってはうまくいくと思います。 :)
ES6 String Templateを試してください。次のようなことができます。
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 * /」を選択した単語に置き換えるだけです。
Zv_oDDの答えに基づいて、簡単に再利用できるように同様の関数を作成しました。
警告：これは多くのJSインタープリターの非標準機能であり、おそらくいつか削除されるでしょうが、Chromeでのみ使用されるスクリプトを作成しているので、使用しています！ everクライアント向けWebサイトではこれに依存しないでください！
// 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!"
ノート：
- テキストは両端でトリミングされるため、両端の余分な空白は問題ありません。
編集：
2/2/2014-Functionプロトタイプをまったく混乱させず、代わりにheredocという名前を使用するように変更しました。
5/26/2017-最新のコーディング標準を反映するように空白を更新しました。
実行しているJS/JSエンジンの種類（SpiderMonkey、AS3）に応じて、hereXMLのように、複数行にテキストを配置できるインラインXMLを簡単に記述できます。
var xml = <xml>
Here
is
some
multiline
text!
</xml>
console.log(xml.toXMLString())
console.log(xml.toString()) // just gets the content
ES6 テンプレート文字列 にはヒアドキュメント機能があります。
バックティック（ ``）で囲まれた文字列を宣言でき、複数の行に展開できます。
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/en-US/docs/Web/JavaScript/Reference/template_strings
JavaScriptにコンパイルされる言語である CoffeeScript を使用できます。コードは1対1で同等のJSにコンパイルされ、実行時には解釈されません。
そしてもちろん、 heredocs :)
@ NateFerrero's answer の単なる拡張として別の答えを書くのは悪いと思うが、彼の答えを編集するのも適切だとは思わないので、この答えがあなたにとって有用であれば、@ NateFerreroに賛成してください。
tl; dr —ブロックコメントinsideを使用したい人のために、ヒアドキュメント...
CSSのブロックを保存するために主にJavascriptのヒアドキュメントが必要でしたe.g。
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が壊れています。
この特定の目的（CSS）では、私の回避策は追加することでした
.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は、単に/* ... * /を見つけ、スペースを削除して/* ... */を作成します。これにより、呼び出されるまでheredocが保持されます。
もちろん、コメントを完全に削除するには
.replace(/\/\*[\s\S]*?\* \//g, '')
チェーンに追加する場合は、//コメントもサポートできます。
.replace(/^\s*\/\/.*$/mg, '')
また、*と/の間の単一のスペース以外のこともできます。たとえば、-のようなものです。
/**
* Nuke rounded corners.
*-/
正規表現を適切に更新する場合：
.replace(/(\/\*[\s\S]*?\*)-\//g, '$1/')
^
それとも、単一のスペースではなく、任意の量の空白が必要ですか？
.replace(/(\/\*[\s\S]*?\*)\s+\//g, '$1/')
^^^
ES5以前のバージョン
(function(){/** some random multi line text here **/}).toString().slice(15,-5);
ES6以降のバージョン
`some random multi line text here`
結果
some random multi line text here
Sweet.jsマクロを使用して、次のように追加できます。 この投稿でTim Disneyが作成
この方法では、代わりに文字列の区切り文字としてバックティックを使用していることに注意してください。
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テンプレート文字列は、従来のヒアドキュメントが提供するもののほとんどを提供します。
さらに一歩進んで、タグ付きテンプレート文字列を使用したい場合、 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.
`)
}
とても些細なことのために正規表現の使用を避けるため、このバージョンを投稿しています。
私見正規表現は、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>手元にいくつかの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));
キャッシュ付き：-単純なテンプレート関数を作成し、関数を保存します：（2回目は高速に動作します）
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)