Javascript EJS文字列リテラル

Question

データベースからgraphviz形式の文字列を取得し、ブラウザのフロントエンドでjavascript関数に渡そうとしています。ビューエンジンとしてNodeJSとEJSを使用しています。次のコードは、グラフ形式の配列を取るgraph_formatとviz.js機能に送信するために私のindex.ejsである：

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

しかし、私は「でSyntaxErrorを取得：引数リストの後に行方不明に）[詳細はこちら] jvgraph [1]は、ブラウザのコンソールと行のコンソールで "graphviz：206：24"エラー " console.log（" ejsからjavascrptへの変換 "）と " console.log（ "javascript変数1の出力" ）" 走らないで。

Iエラーメッセージごとにライン206でブラウザデバッガに移動し、私は、次を参照してください206は、ラインR = r.concatある

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

（有向グラフ{}）。

彼は完全性についてnodejsコンソールからコピー＆ペーストgraph_format配列です：

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

有向グラフ{}有効なJavaScriptではありません。

既存の変数を使用したい場合は、ん：

r=r.concat(digraph); 

しかし、有向グラフは前に宣言して初期化する必要があります。