わしのlog

プログラミングとかバイクとか。

【メモ】ejsに文字列の配列を渡すとquotesが消失する

メモプログラミングプログラミング-JavaScript

環境

Express 4.17.1
ejs 3.1.2

概要

こんな感じで渡すとquotesが消える(一部略)。

ソース

app.get('/hoge', function (req, res) {
    var hoge = ["path", "to", "hoge", "fuga"];
    res.render('hoge', { hoge });
})

<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <div id="container"></div>
  </body>
  <script>
    document.getElementById("container").innerHTML= <%=hoge%>;
  </script>
</html>

実行結果

f:id:devdaikichi:20200428124518p:plain

解

最初ejsで変数を吐く時のタグの違い(<%= %> と <%- %>)かな？と思ってましたが
どうやら違うようで、どちらにしてもクォーテーションは取り除かれるみたいですね。
とりあえずJSON.stringifyを使用して乗り切ることにしました。

<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <div id="container"></div>
  </body>
  <script>
-    document.getElementById("container").innerHTML = <%-hoge%>;
+    document.getElementById("container").innerHTML = <%-JSON.stringify(hoge)%>;
  </script>
</html>

とりあえずこれでscriptタグ内でも文字列の配列が使えるようになりました。

終わりに

事の発端はchart.jsのlabelにExpress側から配列を渡そうとしたことでした。
数値ならうまくいくのになんでだ？と思って開発者ツールを見ると上記エラーに。
ejsのエスケープ処理でquotesは取り除かれる運命なのだろうか

現場からは以上です。