javascriptとelixirでのバックティックの使用

Question

ElixirとPhoenixのフレームワークに関するチュートリアルが続きました。コードは、これは2行目にコンパイルエラーを生成するが

template.innerHTML = ` 
      <a href="#" data-seek="${this.esc(at}"> 
      <b>${this.esc(user.username)}</b>:${this.esc(body)} 
      </a>` 

ことになっています。私はそれを変更した場合：

template.innerHTML = 
      '<a href="#" data-seek="${this.esc(at}">' + 
      '<b>${this.esc(user.username)}</b>:${this.esc(body)}' + 
      '</a>' 

は、その後エラーがないが、それは正確な文字列を表示し、$ {}のセクションに代わるものではありません。何が起こっているか分からない。最初の切り札では、文字列のまわりを囲む "引用符"がありますか？私が読んでいる本を見る​​のは難しいです。

Answer 1

、必ずエラーメッセージを読み、それらを理解してみてください。私はそうのようなあなたのコードのMCVEを作成する場合：

var template = document.createElement("div"); 
 
var at = "place"; 
 
var body = "fancy"; 
 
var user = { username:"joe" }; 
 
var esc = s => s; 
 

 
template.innerHTML = ` 
 
      <a href="#" data-seek="${this.esc(at}"> 
 
      <b>${this.esc(user.username)}</b>:${this.esc(body)} 
 
      </a>`

私は、このエラーメッセージが表示されます。

Error: { 
    "message": "Uncaught SyntaxError: missing) after argument list", 
    "filename": "http://stacksnippets.net/js", 
    "lineno": 20, 
    "colno": 47 
} 

あなたの答えはすぐそこにあります！ライン20 *の引数リストの後に行方不明)を追加し、列47はさんはそれを試してみましょう：

var template = document.createElement("div"); 
 
var at = "place"; 
 
var body = "fancy"; 
 
var user = { username:"joe" }; 
 
var esc = s => s; 
 

 
template.innerHTML = ` 
 
      <a href="#" data-seek="${this.esc(at)}"> 
 
      <b>${this.esc(user.username)}</b>:${this.esc(body)} 
 
      </a>` 
 

 
document.body.appendChild(template);

出来上がり！

* stacksnippetsホスティング環境は、行番号を混乱させました。私たちが知る限り、実際には8行目です。

免責事項：Chrome、FireFox、またはEdgeの最新ビルドを使用していない場合、ES6で導入されたテンプレート文字列や矢印機能などの機能を使用し、古いブラウザには存在しないため、機能しない可能性があります。

Answer 2

ES6では、バックトックを使用して、補間式を使用できる文字列を指定できます。したがって、ドル記号（）の後に角括弧の間に任意の式を置くことができ、そのコードの戻り値が文字列に現れます。

コンパイラが比較的新しい機能を処理できない場合、修正する2回目の試みでは、式を文字列から引き出して個別に連結する必要があります。

template.innerHTML = 
     '<a href="#" data-seek="' + this.esc(at + '">' + 
     '<b>' + this.esc(user.username) + '</b>:' + this.esc(body) + 
     '</a>' 

ただし、これを行うとエラーが表示されます。 this.esc(atは有効なコードではありません。そこに括弧がないように見えます。おそらく元のコードのあなたの問題です。

サイコー、（一見不足している括弧を追加しました）、これを試してみてください。

template.innerHTML = ` 
     <a href="#" data-seek="${this.esc(at)}"> 
     <b>${this.esc(user.username)}</b>:${this.esc(body)} 
     </a>`