Javascript EJS字符串文字

Question

我想從我的數據庫中拉出graphviz格式字符串，並傳遞給我的瀏覽器前端的JavaScript函數。我使用NodeJS和EJS作爲視圖引擎。下面的代碼是我index.ejs採取的圖形格式，graph_format陣列併發送至viz.js功能：

<script> 
window.onload=function(){ 
    console.log("converting ejs to javascrpt") 

    var jscgraph=[]; 
    <% graph_formats.forEach(function(graph){%> 
    for(var i=0;i<graph_formats.length;i++){ 
     var r = ""; 
     r=r.concat("\""); 
     r=r.concat(<%- graph%>; 
     r=r.concat("\""); 
     document.body.innerHTML += Viz(r); 
    } 
    <% 
    }) 
    %> 

    console.log("now printing javascript variable 1"+jscgraph[1]) 
} 
</script> 

不過，我得到一個「語法錯誤：參數列表後缺少）瞭解更多] graphviz：206：24「在我的瀏覽器的控制檯和行」 console.log（「轉換ejs到javascrpt」）和 「console.log（」現在打印javascript變量1「+ jscgraph [1] ）「 別跑。

當我去瀏覽器的調試器在線路206按照錯誤消息，我看到以下內容：

<script> 
window.onload=function(){ 
    console.log("converting ejs to javascrpt") 

    var jscgraph=[]; 

    for(var i=0;i<graph_formats.length;i++){ 
     var r = ""; 
     r=r.concat("\""); 
     r=r.concat(digraph{ 
}); 
     r=r.concat("\""); 
     document.body.innerHTML += Viz(r); 
    } 

其中206是行R = r.concat（有向圖{}）;

他是graph_format陣列複製，並從控制檯的NodeJS粘貼的完整性：

[ 'digraph{\n}\n\n\n\n\n\n', 
 
    'digraph{\n0 [label="PUSH4", style=filled, color=antiquewhite]\n1 [label="PUSH1", style=filled, color=antiquewhite]\n2 [label="PUSH1", style=filled, color=antiquewhite]\n3 [label="EXP", style=filled, color=coral4]\n1 -> 3 [label="00000000000000000000000000000000000000000000000000000000000000e0", fontcolor=antiquewhite]\n2 -> 3 [label="0000000000000000000000000000000000000000000000000000000000000002", fontcolor=antiquewhite]\n4 [label="PUSH1", style=filled, color=antiquewhite]\n5 [label="CALLDATALOAD", style=filled, color=darkorchid4]\n4 -> 5 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\n6 [label="DIV", style=filled, color=chocolate3]\n3 -> 6 [label="0000000100000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\n5 -> 6 [label="1896f70a8851b17a825ca0cfde09020276ebce9c64cb69476c3b2e27299ccc88", fontcolor=antiquewhite]\n7 [label="EQ", style=filled, color=gold4]\n0 -> 7 [label="000000000000000000000000000000000000000000000000000000000178b8bf", fontcolor=antiquewhite]\n6 -> 7 [label="000000000000000000000000000000000000000000000000000000001896f70a", fontcolor=antiquewhite]\n8 [label="ISZERO", style=filled, color=goldenrod]\n7 -> 8 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\n9 [label="PUSH2", style=filled, color=antiquewhite]\n10 [label="JUMPI", style=filled, color=burlywood1]\n8 -> 10 [label="0000000000000000000000000000000000000000000000000000000000000001", fontcolor=antiquewhite]\n9 -> 10 [label="0000000000000000000000000000000000000000000000000000000000000023", fontcolor=antiquewhite]\n11 [label="JUMPDEST", style=filled, color=magenta]\n12 [label="PUSH4", style=filled, color=antiquewhite]\n13 [label="PUSH1", style=filled, color=antiquewhite]\n14 [label="PUSH1", style=filled, color=antiquewhite]\n15 [label="EXP", style=filled, color=coral4]\n13 -> 15 [label="00000000000000000000000000000000000000000000000000000000000000e0", fontcolor=antiquewhite]\n14 -> 15 [label="0000000000000000000000000000000000000000000000000000000000000002", fontcolor=antiquewhite]\n16 [label="PUSH1", style=filled, color=antiquewhite]\n17 [label="CALLDATALOAD", style=filled, color=darkorchid4]\n16 -> 17 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\n18 [label="DIV", style=filled, color=chocolate3]\n15 -> 18 [label="0000000100000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\n17 -> 18 [label="1896f70a8851b17a825ca0cfde09020276ebce9c64cb69476c3b2e27299ccc88", fontcolor=antiquewhite]\n19 [label="EQ", style=filled, color=gold4]\n12 -> 19 [label="0000000000000000000000000000000000000000000000000000000002571be3", fontcolor=antiquewhite]\n18 -> 19 [label="000000000000000000000000000000000000000000000000000000001896f70a", fontcolor=antiquewhite]\n20 [label="ISZERO", style=filled, color=goldenrod]\n19 -> 20 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\n21 [label="PUSH2", style=filled, color=antiquewhite]\n22 [label="JUMPI", style=filled, color=burlywood1]\n20 -> 22 [label="0000000000000000000000000000000000000000000000000000000000000001", fontcolor=antiquewhite]\n21 -> 22 [label="0000000000000000000000000000000000000000000000000000000000000047", fontcolor=antiquewhite]\n23 [label="JUMPDEST", style=filled, color=magenta]\n24 [label="PUSH4", style=filled, color=antiquewhite]\n25 [label="PUSH1", style=filled, color=antiquewhite]\n26 [label="PUSH1", style=filled, color=antiquewhite]\n27 [label="EXP", style=filled, color=coral4]\n25 -> 27 [label="00000000000000000000000000000000000000000000000000000000000000e0", fontcolor=antiquewhite]\n26 -> 27 [label="0000000000000000000000000000000000000000000000000000000000000002", fontcolor=antiquewhite]\n28 [label="PUSH1", style=filled, color=antiquewhite]\n29 [label="CALLDATALOAD", style=filled, color=darkorchid4]\n28 -> 29 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\n30 [label="DIV", style=filled, color=chocolate3]\n27 -> 30 [label="0000000100000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\n29 -> 30 [label="1896f70a8851b17a825ca0cfde09020276ebce9c64cb69476c3b2e27299ccc88", fontcolor=antiquewhite]\n31 [label="EQ", style=filled, color=gold4]\n24 -> 31 [label="0000000000000000000000000000000000000000000000000000000016a25cbd", fontcolor=antiquewhite]\n30 -> 31 [label="000000000000000000000000000000000000000000000000000000001896f70a", fontcolor=antiquewhite]\n32 [label="ISZERO", style=filled, color=goldenrod]\n31 -> 32 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\n33 [label="PUSH2", style=filled, color=antiquewhite]\n34 [label="JUMPI", style=filled, color=burlywood1]\n32 -> 34 [label="0000000000000000000000000000000000000000000000000000000000000001", fontcolor=antiquewhite]\n33 -> 34 [label="000000000000000000000000000000000000000000000000000000000000006b", fontcolor=antiquewhite]\n35 [label="JUMPDEST", style=filled, color=magenta]\n36 [label="PUSH4", style=filled, color=antiquewhite]\n37 [label="PUSH1", style=filled, color=antiquewhite]\n38 [label="PUSH1", style=filled, color=antiquewhite]\n39 [label="EXP", style=filled, color=coral4]\n37 -> 39 [label="00000000000000000000000000000000000000000000000000000000000000e0", fontcolor=antiquewhite]\n38 -> 39 [label="0000000000000000000000000000000000000000000000000000000000000002", fontcolor=antiquewhite]\n40 [label="PUSH1", style=filled, color=antiquewhite]\n41 [label="CALLDATALOAD", style=filled, color=darkorchid4]\n40 -> 41 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\n42 [label="DIV", style=filled, color=chocolate3]\n39 -> 42 [label="0000000100000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\n41 -> 42 [label="1896f70a8851b17a825ca0cfde09020276ebce9c64cb69476c3b2e27299ccc88", fontcolor=antiquewhite]\n43 [label="EQ", style=filled, color=gold4]\n36 -> 43 [label="000000000000000000000000000000000000000000000000000000005b0fc9c3", fontcolor=antiquewhite]\n42 -> 43 [label="000000000000000000000000000000000000000000000000000000001896f70a", fontcolor=antiquewhite]\n44 [label="ISZERO", style=filled, color=goldenrod]\n43 -> 44 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\n45 [label="PUSH2", style=filled, color=antiquewhite]\n46 [label="JUMPI", style=filled, color=burlywood1]\n44 -> 46 [label="0000000000000000000000000000000000000000000000000000000000000001", fontcolor=antiquewhite]\n45 -> 46 [label="00000000000000000000000000000000000000000000000000000000000000b8", fontcolor=antiquewhite]\n47 [label="JUMPDEST", style=filled, color=magenta]\n48 [label="PUSH4", style=filled, color=antiquewhite]\n49 [label="PUSH1", style=filled, color=antiquewhite]\n50 [label="PUSH1", style=filled, color=antiquewhite]\n51 [label="EXP", style=filled, color=coral4]\n49 -> 51 [label="00000000000000000000000000000000000000000000000000000000000000e0", fontcolor=antiquewhite]\n50 -> 51 [label="0000000000000000000000000000000000000000000000000000000000000002", fontcolor=antiquewhite]\n52 [label="PUSH1", style=filled, color=antiquewhite]\n53 [label="CALLDATALOAD", style=filled, color=darkorchid4]\n52 -> 53 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\n54 [label="DIV", style=filled, color=chocolate3]\n51 -> 54 [label="0000000100000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\n53 -> 54 [label="1896f70a8851b17a825ca0cfde09020276ebce9c64cb69476c3b2e27299ccc88", fontcolor=antiquewhite]\n55 [label="EQ", style=filled, color=gold4]\n48 -> 55 [label="0000000000000000000000000000000000000000000000000000000006ab5923", fontcolor=antiquewhite]\n54 -> 55 [label="000000000000000000000000000000000000000000000000000000001896f70a", fontcolor=antiquewhite]\n56 [label="ISZERO", style=filled, color=goldenrod]\n55 -> 56 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\n57 [label="PUSH2", style=filled, color=antiquewhite]\n58 [label="JUMPI", style=filled, color=burlywood1]\n56 -> 58 [label="0000000000000000000000000000000000000000000000000000000000000001", fontcolor=antiquewhite]\n57 -> 58 [label="0000000000000000000000000000000000000000000000000000000000000116", fontcolor=antiquewhite]\n59 [label="JUMPDEST", style=filled, color=magenta]\n60 [label="PUSH4", style=filled, color=antiquewhite]\n61 [label="PUSH1", style=filled, color=antiquewhite]\n62 [label="PUSH1", style=filled, color=antiquewhite]\n63 [label="EXP", style=filled, color=coral4]\n61 -> 63 [label="00000000000000000000000000000000000000000000000000000000000000e0", fontcolor=antiquewhite]\n62 -> 63 [label="0000000000000000000000000000000000000000000000000000000000000002", fontcolor=antiquewhite]\n64 [label="PUSH1", style=filled, color=antiquewhite]\n65 [label="CALLDATALOAD", style=filled, color=darkorchid4]\n64 -> 65 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\n66 [label="DIV", style=filled, color=chocolate3]\n63 -> 66 [label="0000000100000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\n65 -> 66 [label="1896f70a8851b17a825ca0cfde09020276ebce9c64cb69476c3b2e27299ccc88", fontcolor=antiquewhite]\n67 [label="EQ", style=filled, color=gold4]\n60 -> 67 [label="000000000000000000000000000000000000000000000000000000001896f70a", fontcolor=antiquewhite]\n66 -> 67 [label="000000000000000000000000000000000000000000000000000000001896f70a", fontcolor=antiquewhite]\n68 [label="ISZERO", style=filled, color=goldenrod]\n67 -> 68 [label="0000000000000000000000000000000000000000000000000000000000000001", fontcolor=antiquewhite]\n69 [label="PUSH2", style=filled, color=antiquewhite]\n70 [label="JUMPI", style=filled, color=burlywood1]\n68 -> 70 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\n69 -> 70 [label="0000000000000000000000000000000000000000000000000000000000000163", fontcolor=antiquewhite]\n71 [label="PUSH1", style=filled, color=antiquewhite]\n72 [label="PUSH1", style=filled, color=antiquewhite]\n73 [label="CALLDATALOAD", style=filled, color=darkorchid4]\n72 -> 73 [label="0000000000000000000000000000000000000000000000000000000000000004", fontcolor=antiquewhite]\n74 [label="ADD", style=filled, color=chocolate]\n71 -> 74 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\n73 -> 74 [label="8851b17a825ca0cfde09020276ebce9c64cb69476c3b2e27299ccc88f650c575", fontcolor=antiquewhite]\n75 [label="SLOAD", style=filled, color=chartreuse]\n74 -> 75 [label="8851b17a825ca0cfde09020276ebce9c64cb69476c3b2e27299ccc88f650c575", fontcolor=antiquewhite]\n76 [label="CALLER", style=filled, color=darkorchid2]\n77 [label="EQ", style=filled, color=gold4]\n75 -> 77 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\n76 -> 77 [label="00000000000000000000000065ddc3a1f2762f3d0669bbeea44e16b2b38090a5", fontcolor=antiquewhite]\n78 [label="ISZERO", style=filled, color=goldenrod]\n77 -> 78 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\n79 [label="ISZERO", style=filled, color=goldenrod]\n78 -> 79 [label="0000000000000000000000000000000000000000000000000000000000000001", fontcolor=antiquewhite]\n80 [label="PUSH2", style=filled, color=antiquewhite]\n81 [label="JUMPI", style=filled, color=burlywood1]\n79 -> 81 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\n80 -> 81 [label="000000000000000000000000000000000000000000000000000000000000013d", fontcolor=antiquewhite]\n82 [label="PUSH1", style=filled, color=antiquewhite]\n83 [label="JUMP", style=filled, color=burlywood1]\n82 -> 83 [label="0000000000000000000000000000000000000000000000000000000000000002", fontcolor=antiquewhite]\n84 [label="JUMP", style=filled, color=burlywood1]\n}\n\n\n\n\n\n' ]

有人可以告訴我，我需要做的就是將viz.js功能接受這個字符串？它接受result = Viz（「digraph {a - > b;}」）形式的字符串;按照https://www.npmjs.com/package/viz.js

感謝

Answer 1

你的模板輸出一些無效的JavaScript語法：

digraph{ 
} 

你需要輸出r.concat("digraph{ }")。

你可以換你的輸出在雙引號：

r=r.concat('"' + <%- graph%> + '"'); 

但是，這將失敗，因爲包含一個新行字符。帶有單引號或雙引號的JavaScript字符串不允許這樣做。

如果沒有需要支持舊的瀏覽器，你可以使用反引號來代替：

r=r.concat('`' + <%- graph%> + '`'); 

這是一個"template literal"字符串，可以多行內容。

它適用於所有現代瀏覽器，但不適用於任何版本的Internet Explorer。請參閱browser compatibility以決定是否可以使用它。

如果您確實需要支持舊瀏覽器，則需要從刪除任何換行符。如果是字符串：

var cleanGraph = graph.replace(/\n/g, " ") 
r=r.concat('"' + <%- cleanGraph%> + '"') 

Answer 2

我覺得這裏是錯誤： -

r=r.concat(<%- graph%>; 

你需要它： -

r=r.concat(<%- graph%>); 

在你的代碼檢查。

Answer 3

digraph {}無效JavaScript。

如果你想使用一個現有的變量，這樣做：

r=r.concat(digraph); 

但有向圖都將被聲明和初始化之前。