javascript - 悪名高い「終了していない文字列リテラル」エラーを回避するには?

Question

シンプルな HTML ファイルをキャンバスに読み込もうとしました (browser = ff 3.66)。

var canvas= document.getElementById('oneElement');
var ctx= canvas.getContext('2d');

var img= new Image();
ctx.drawImage(img, 0, 0, img.width, img.height);
img.src = 'data:text/html,&lt;table&gt;&lt;tr&gt;&lt;td&gt;data 1&lt;td&gt;data 2&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;data 3&gt;&lt;td&gt;data 4&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;data 5&gt;&lt;td&gt;data 6&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
';

どうすればこの問題を回避できますか?

score 1 · Accepted Answer

Javascript文字列内に改行があるようです-これは許可されていません。

これらの改行を削除して、文字列を1行だけに入れる必要があります。

img.src = 'data:text/html,&lt;table&gt;&lt;tr&gt;&lt;td&gt;data1&lt;td&gt;data2&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;data 3&gt;&lt;td&gt;data 4&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;data 5&gt;&lt;td&gt;data 6&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;';

または、コードを読みやすくしたい場合は、いくつかの小さな文字列を使用し、文字列連結を使用することで解決できます。

img.src = 'data:text/html,&lt;table&gt;&lt;tr&gt;&lt;td&gt;data 1&lt;td&gt;data 2&lt;/td&gt;&lt;/tr&gt;' +
'&lt;tr&gt;&lt;td&gt;data 3&gt;&lt;td&gt;data 4&lt;/td&gt;&lt;/tr&gt;' +
'&lt;tr&gt;&lt;td&gt;data 5&gt;&lt;td&gt;data 6&lt;/td&gt;&lt;/tr&gt;' +
'&lt;/table&gt;';

score 0 · Accepted Answer

各行の最後に、一重引用符で囲まれた行の前に「\」文字を追加すると機能するはずです。

img.src = 'here \
is an \
example';

javascript - 悪名高い「終了していない文字列リテラル」エラーを回避するには?

2 に答える 2

Related

Reference