Javascript heredoc

Necesito algo como heredoc en JavaScript. ¿Tienes alguna idea para esto? Necesito la funcionalidad de varios navegadores.

Encontré esto:

heredoc = '\
<div>\
    <ul>\
        <li><a href="#zzz">zzz</a></li>\
    </ul>\
</div>';

Creo que funcionará para mí. :)

Pruebe ES6 String Template , puede hacer algo como

var hereDoc = `
This
is
a
Multiple
Line
String
`.trim()


hereDoc == 'This\nis\na\nMultiple\nLine\nString'

=> true

Puede utilizar esta gran función hoy con 6to5 o TypeScript

No, lamentablemente JavaScript no admite nada como heredoc.

Qué tal esto:

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());

Simplemente reemplace "/ * AQUÍ" y "AQUÍ * /" con la palabra de su elección.

Sobre la base de la respuesta de Zv_oDD, creé una función similar para una reutilización más fácil.

Advertencia: esta es una característica no estándar de muchos intérpretes de JS y probablemente se eliminará en algún momento, pero como estoy creando un script para usar solo en Chrome, ¡lo estoy usando! ¡ Nunca confíe en esto para los sitios web orientados al cliente!

// Multiline Function String - Nate Ferrero - Public Domain
function heredoc(fn) {
  return fn.toString().match(/\/\*\s*([\s\S]*?)\s*\*\//m)[1];
};

Utilizar:

var txt = heredoc(function () {/*
A test of horrible
Multi-line strings!
*/});

Devoluciones:

"A test of horrible
Multi-line strings!"

Notas:

1. El texto se recorta en ambos extremos, por lo que cualquier espacio en blanco adicional en cualquier extremo está bien.

Ediciones:

2/2/2014 - cambiado para no meterse con el prototipo de Función y usar el nombre heredoc en su lugar.

26/05/2017: espacio en blanco actualizado para reflejar los estándares de codificación modernos.

Dependiendo del tipo de motor JS / JS que esté ejecutando (SpiderMonkey, AS3), simplemente puede escribir XML en línea, en el que puede colocar texto en varias líneas, como heredoc:

var xml = <xml>
    Here 
    is 
    some 
    multiline 
    text!
</xml>

console.log(xml.toXMLString())
console.log(xml.toString()) // just gets the content

ES6 Template Strings tiene la función heredoc.

Puede declarar cadenas encerradas con tilde invertido (``) y se pueden expandir a través de varias líneas.

var str = `This is my template string...
and is working across lines`;

También puede incluir expresiones dentro de las cadenas de plantillas. Estos se indican mediante el signo de dólar y llaves ( ${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"

De hecho, hay más características como Tagged Temple Strings y Raw Strings en él. Encuentre la documentación en

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings

Me siento mal por escribir una respuesta separada para simplemente una extensión de la respuesta de @NateFerrero , pero tampoco creo que editar su respuesta sea apropiado, así que vota a @NateFerrero si esta respuesta fue útil para ti.

tl; dr: para aquellos que deseen utilizar comentarios en bloque dentro de su heredoc ...

Principalmente necesitaba heredocs de Javascript para almacenar un bloque de CSS, por ejemplo

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;
    }
*/});

Sin embargo, como puede ver, me gusta comentar mi CSS y, desafortunadamente (como lo sugiere el resaltado de sintaxis), el primero */finaliza el comentario general, rompiendo el heredoc.

Para este propósito específico (CSS), mi solución fue agregar

.replace(/(\/\*[\s\S]*?\*) \//g, '$1/')

a la cadena dentro de @NateFerrero's heredoc; en forma completa:

function heredoc (f) {
    return f.toString().match(/\/\*\s*([\s\S]*?)\s*\*\//m)[1].replace(/(\/\*[\s\S]*?\*) \//g, '$1/');
};

y utilícelo agregando un espacio entre *y /para los comentarios del bloque "interno", así:

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;
    }
*/});

El replacesimplemente encuentra /* ... * /y elimina el espacio para hacer /* ... */, preservando así la heredoc hasta que fue llamado.

Por supuesto, puede eliminar los comentarios usando

.replace(/\/\*[\s\S]*?\* \//g, '')

También puede admitir //comentarios si los agrega a la cadena:

.replace(/^\s*\/\/.*$/mg, '')

Además, puede hacer algo diferente al espacio único entre *y /, como -:

    /**
     * Nuke rounded corners.
     *-/

si solo actualiza la expresión regular de manera adecuada:

.replace(/(\/\*[\s\S]*?\*)-\//g, '$1/')
                          ^

¿O tal vez le gustaría una cantidad arbitraria de espacios en blanco en lugar de un solo espacio?

.replace(/(\/\*[\s\S]*?\*)\s+\//g, '$1/')
                          ^^^

Puede utilizar CoffeeScript , un lenguaje que se compila en JavaScript. El código se compila uno a uno en el JS equivalente y no hay interpretación en tiempo de ejecución.

Y por supuesto, tiene heredocs :)

ES5 y versiones anteriores

(function(){/**
some random
multi line
text here
**/}).toString().slice(15,-5);

ES6 y versiones posteriores

`some random
multi line
text here`

resultado

some random
multi line
text here

Puede usar Sweet.js Macros para agregarlo así, como lo creó Tim Disney en esta publicación

Tenga en cuenta que este enfoque usa comillas invertidas como delimitadores de cadena en su lugar:

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`

Como han dicho otros, las cadenas de plantillas de ES6 le brindan la mayor parte de lo que proporcionan los heredocs tradicionales.

Si desea ir un paso más allá y usar una cadena de plantilla etiquetada, theredochay una buena función de utilidad que le permite hacer esto:

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.
  `)
}

Si tiene html y jQuery a mano y la cadena es HTML válido, esto puede ser útil:

<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>

Si el texto tiene comentarios "<! - ->" en el medio, también funciona, pero una parte del texto puede ser visible. Aquí está el violín: 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
}

ejemplo

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));

con caché: - crea una función de plantilla simple y guarda la función: (la segunda vez funciona rápido)

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)

Estoy publicando esta versión porque evita el uso de expresiones regulares para algo tan trivial.

En mi humilde opinión, la expresión regular es una ofuscación que se creó como una broma entre los desarrolladores de perl. el resto de la comunidad los tomó en serio y ahora pagamos el precio, décadas después. no use expresiones regulares, excepto por compatibilidad con versiones anteriores del código heredado. No hay excusa en estos días para escribir código que no sea inmediatamente legible y comprensible para humanos. regex viola este principio en todos los niveles.

También agregué una forma de agregar el resultado a la página actual, no es que se haya solicitado.

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>