動態 html 屬性的字符串插值

Question

是否可以對以下內容使用字符串插值（注意動態屬性）

document.body.innerHTML += <form id="digSigForm" action="${myObj.Url}" method="post"><input type="hidden" name="data" value="${myObj.someVal}"></form>

Answer 1

document.body.innerHTML += `<form id="digSigForm" action="${myObj.Url}" method="post"><input type="hidden" name="data" value="${myObj.someVal}"></form>`;

你忘了反引號

Answer 2

這目前不起作用。

我有一個這樣的字符串，其中行的數據屬性依賴於某些功能。

`<tr class="row ${rowHiddenClass}" data-someId="${this.someId}">
  <td class="cell">${this.Notes}</td>
  <td class="cell amount">$${this.Amount}</td>
</tr>`

它在屬性字符串中像這樣輸出，這破壞了該功能。

<tr class="row $" data-someId="$">
  <td class="cell">A nice note</td>
  <td class="cell amount">$4.00</td>
</tr>

我們可能暫時需要做一些串聯。
我還不確定什么是更清潔、更簡單的解決方案。

這有效。

`<tr class="row ` + rowHiddenClass + `" data-someId="` + this.someId + `">
  <!-- ... -->
</tr>`

Answer 3

您應該使用反引號來定義帶有字符串插值的字符串：``

像這樣：

console.log(`1 and 1 make ${1 + 1}`);

這是來自打字稿文檔：

另一個常見用例是當您想從一些靜態字符串 + 一些變量中生成一些字符串時。 為此，您需要一些模板邏輯，這就是模板字符串名稱的來源。 以下是您之前可能生成的 html 字符串的方式：

var lyrics = 'Never gonna give you up';
var html = '<div>' + lyrics + '</div>';

現在使用模板字符串，您可以執行以下操作：

var lyrics = 'Never gonna give you up';
var html = `<div>${lyrics}</div>`;

請注意，插值中的任何占位符（${ 和}）都被視為 JavaScript 表達式並進行評估，例如您可以進行花哨的數學運算。

console.log(`1 and 1 make ${1 + 1}`);