Мне нужно что-то вроде heredoc в JavaScript. У вас есть идеи для этого? Мне нужна кросс-браузерная функциональность.
Я нашел это:
heredoc = '\
<div>\
<ul>\
<li><a href="#zzz">zzz</a></li>\
</ul>\
</div>';
Думаю, это сработает для меня.:)
Нет, к сожалению, JavaScript не поддерживает ничего подобного heredoc.
Попробуйте шаблон строки ES6, вы можете сделать что-то вроде
var hereDoc = '
This
is
a
Multiple
Line
String
'.trim()
hereDoc == 'This\nis\na\nMultiple\nLine\nString'
=> true
Вы можете использовать эту замечательную функцию сегодня с 6to5 или TypeScript
Как насчет этого:
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());
Просто замените "/* ЗДЕСЬ" и "ЗДЕСЬ */" словом выбора.
На основе ответа Zv_oDD я создал аналогичную функцию для более простого повторного использования.
Предупреждение: Это нестандартная функция многих интерпретаторов JS и, вероятно, будет удалена в какой-то момент, но по мере того, как я создаю script, который будет использоваться только в 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!"
Примечания:
Изменения:
2/2/2014 - изменено, чтобы вообще не путать с прототипом Function и вместо этого использовать имя heredoc.
5/26/2017 - обновленные пробелы, отражающие современные стандарты кодирования.
В зависимости от того, какой вкус JS/JS-движка вы используете (SpiderMonkey, AS3), вы можете просто написать встроенный XML, в который вы можете разместить текст на нескольких строках, например heredoc:
var xml = <xml>
Here
is
some
multiline
text!
</xml>
console.log(xml.toXMLString())
console.log(xml.toString()) // just gets the content
ES6 Шаблонные строки имеет функцию heredoc.
Вы можете объявлять строки, заключенные back-tick (``), и могут быть расширены через несколько строк.
var str = `This is my template string...
and is working across lines`;
Вы также можете включать выражения внутри Template Strings. Они обозначаются знаком "Доллар" и фигурными фигурными скобками (${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"
На самом деле в нем больше функций, таких как Tagged Temple Strings и Raw Strings. Пожалуйста, найдите документацию на
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings
Мне плохо писать отдельный ответ только для расширения @NateFerrero answer, но я не чувствую, что его ответ тоже подходит, поэтому, пожалуйста, upvote @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.
Для этой конкретной цели (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/')
^^^
Вы можете использовать CoffeeScript, язык, который скомпилирован с JavaScript. Код компилируется взаимно однозначно в эквивалентную JS, и во время выполнения интерпретации не существует.
И, конечно, он имеет heredocs:)
Вы можете использовать Макросы Sweet.js, чтобы добавить его так, как создано Тимом Диснеем в этом сообщении
Обратите внимание, что в этом подходе вместо обратных ссылок используются обратные ссылки:
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.
')
}
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
Если у вас есть 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)
Я публикую эту версию, так как она не использует регулярные выражения для чего-то такого тривиального.
IMHO регулярное выражение - это запутывание, которое было создано как практическая шутка среди разработчиков 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>