Javascript heredoc

Tôi cần một cái gì đó như heredoc trong JavaScript. Bạn có bất kỳ ý tưởng cho điều này? Tôi cần chức năng trình duyệt chéo.

Tôi đã tìm thấy cái này:

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

Tôi nghĩ rằng nó sẽ làm việc cho tôi. :)

Hãy thử Mẫu chuỗi ES6 , bạn có thể làm những việc như

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


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

=> true

Bạn có thể sử dụng tính năng tuyệt vời này ngay hôm nay bằng 6to5 hoặc TypeScript

Không, rất tiếc JavaScript không hỗ trợ bất cứ thứ gì như heredoc.

Còn cái này thì sao:

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

Chỉ cần thay thế "/ * HERE" và "HERE * /" bằng từ lựa chọn.

Dựa trên câu trả lời của Zv_oDD, tôi đã tạo một hàm tương tự để sử dụng lại dễ dàng hơn.

Cảnh báo: Đây là một tính năng không chuẩn của nhiều trình thông dịch JS và có thể sẽ bị xóa vào một lúc nào đó, nhưng vì tôi đang xây dựng một tập lệnh để chỉ sử dụng trong Chrome nên tôi đang sử dụng nó! Đừng bao giờ dựa vào điều này cho các trang web dành cho khách hàng!

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

Sử dụng:

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

Lợi nhuận:

"A test of horrible
Multi-line strings!"

Ghi chú:

1. Văn bản được cắt ở cả hai đầu, vì vậy bất kỳ khoảng trắng thừa nào ở hai đầu đều được.

Chỉnh sửa:

2/2/2014 - đã thay đổi để hoàn toàn không gây rối với nguyên mẫu Hàm và sử dụng tên heredoc để thay thế.

5/26/2017 - khoảng trắng được cập nhật để phản ánh các tiêu chuẩn mã hóa hiện đại.

Tùy thuộc vào hương vị của công cụ JS / JS bạn đang chạy (SpiderMonkey, AS3), bạn có thể chỉ cần viết XML nội tuyến, vào đó bạn có thể đặt văn bản trên nhiều dòng, như heredoc:

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

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

Chuỗi mẫu ES6 có tính năng heredoc.

Bạn có thể khai báo các chuỗi được bao bởi dấu tích ngược (``) và có thể được mở rộng qua nhiều dòng.

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

Bạn cũng có thể bao gồm các biểu thức bên trong Chuỗi mẫu. Chúng được biểu thị bằng dấu Dollar và dấu ngoặc nhọn ( ${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"

Trên thực tế, có nhiều tính năng hơn như Tagged Temple Strings và Raw Strings trong đó. Vui lòng tìm tài liệu tại

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

Tôi cảm thấy không ổn khi viết một câu trả lời riêng chỉ đơn thuần là một phần mở rộng cho câu trả lời của @ NateFerrero , nhưng tôi cảm thấy việc chỉnh sửa câu trả lời của anh ấy cũng không phù hợp, vì vậy vui lòng ủng hộ @NateFerrero nếu câu trả lời này hữu ích với bạn.

tl; dr — Dành cho những người muốn sử dụng nhận xét khối bên trong heredoc của họ ...

Tôi chủ yếu cần heredocs Javascript để lưu trữ một khối CSS, ví dụ:

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

Tuy nhiên, như bạn có thể thấy, tôi thích nhận xét CSS của mình, và thật không may (như được gợi ý bởi tô sáng cú pháp) phần đầu tiên */kết thúc nhận xét tổng thể, phá vỡ heredoc.

Đối với mục đích cụ thể này (CSS), cách giải quyết của tôi là thêm

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

vào chuỗi bên trong @ NateFerrero's heredoc; ở dạng hoàn chỉnh:

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

và sử dụng nó bằng cách thêm một khoảng trắng giữa *và /cho các nhận xét khối "bên trong", như sau:

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

Đơn replacegiản là tìm /* ... * /và loại bỏ không gian để tạo /* ... */, do đó bảo toàn heredoc cho đến khi được gọi.

Tất nhiên, bạn có thể xóa hoàn toàn các nhận xét bằng cách sử dụng

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

Bạn cũng có thể hỗ trợ //nhận xét nếu bạn thêm chúng vào chuỗi:

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

Ngoài ra, bạn có thể làm điều gì đó ngoài khoảng trắng duy nhất giữa *và /, chẳng hạn như -:

    /**
     * Nuke rounded corners.
     *-/

nếu bạn chỉ cập nhật regex một cách thích hợp:

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

Hoặc có thể bạn muốn một lượng khoảng trắng tùy ý thay vì một khoảng trắng?

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

Bạn có thể sử dụng CoffeeScript , một ngôn ngữ biên dịch thành JavaScript. Mã biên dịch 1-1 thành JS tương đương và không có diễn giải trong thời gian chạy.

Và tất nhiên, nó có heredocs :)

ES5 và các phiên bản trước đó

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

ES6 và các phiên bản mới hơn

`some random
multi line
text here`

kết quả

some random
multi line
text here

Bạn có thể sử dụng Macro Sweet.js để thêm nó giống như vậy, như được tạo bởi Tim Disney trong bài đăng này

Lưu ý rằng phương pháp này sử dụng dấu gạch ngược làm dấu phân cách chuỗi thay thế:

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`

Như những người khác đã nói, chuỗi mẫu ES6 cung cấp cho bạn hầu hết những gì heredocs truyền thống cung cấp.

Nếu bạn muốn tiến thêm một bước và sử dụng chuỗi mẫu được gắn thẻ, thì đây theredoclà một chức năng tiện ích tuyệt vời cho phép bạn thực hiện điều này:

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

Nếu bạn có một số html và jQuery trong tay và chuỗi là HTML hợp lệ, điều này có thể hữu ích:

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

Nếu văn bản có chú thích "<! - ->" ở giữa, nó cũng hoạt động, nhưng một phần của văn bản có thể hiển thị. Đây là fiddle: 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
}

thí dụ

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

với bộ nhớ cache: - tạo một chức năng mẫu đơn giản và lưu chức năng: (hoạt động nhanh lần thứ hai)

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)

Tôi đăng phiên bản này vì nó tránh việc sử dụng regex cho những thứ quá tầm thường.

IMHO regex là một sự xáo trộn được tạo ra như một trò đùa thực tế giữa các nhà phát triển perl. phần còn lại của cộng đồng đã coi chúng một cách nghiêm túc và bây giờ chúng ta phải trả giá, hàng thập kỷ sau. không sử dụng regex, ngoại trừ tính tương thích ngược với mã kế thừa. Ngày nay không có lý do gì để viết mã mà con người không thể đọc và hiểu được ngay lập tức. regex vi phạm nguyên tắc này ở mọi cấp độ.

Tôi cũng đã thêm một cách để thêm kết quả vào trang hiện tại, không phải điều này được yêu cầu.

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>