【EJS】<%= %>と<%- %>の違いを解説してみた

今回はHTMLのテンプレートエンジン「EJS」の書き方について解説します。

タイトル通り、<%= %>と<%- %>の違いについてですね。

 

変数を定義する

その前に、わかりやすいように変数について少しおさらいします。

<% %>の中ではJavaScriptが使えるようになり、変数や関数を記述することができます。

変数は以下のように指定します。

<% var value = '定義する文字列'; %>

 

この変数は記述されたEJSファイルと、このファイルのインクルード先のEJSファイルで使うことができます。

 

変数を呼び出す

変数を呼び出す際に使用するのが<%= %>と<%- %>の2つですが、両者の違いはエスケープ処理をするかしないかにあります。

<% var siteName = '<h1>サイト名</h1>'; %>

<%- siteName %>

<%= siteName %>

 

上記のように記述した場合、コンパイル後は以下のようになります。

<h1>サイト名</h1>
&lt;h1&gt;サイト名&lt;/h1&gt;

 

<%- %>の方はそのまま出力され、<%= %>の方がエスケープされて出力されます。

基本的に<%- %>はタグをそのまま出力する際に使用し、<%= %>は文字列を出力する時に使用します。

 

まとめ

  • <%- %>はタグ用
  • <%= %>は文字列用

と覚えましょう!

変数に格納した文字列を出力する方が頻度としては圧倒的に多いので、「<%= %>がよく使う方。というか基本的に使うのはこっち」と覚えてもいいですね。