动态 html 属性的字符串插值答案

【问题标题】：string interpolation for dynamic html attributes动态 html 属性的字符串插值
【发布时间】：2017-05-24 16:21:54
【问题描述】：

以下是否可以使用字符串插值（注意动态属性）

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

【问题讨论】：

标签： javascript typescript ecmascript-6

【解决方案1】：

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

你忘记了反引号

【讨论】：

【解决方案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>`

【讨论】：

【解决方案3】：

你应该使用反引号来定义一个带有字符串插值的字符串：``

像这样：

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

来自typescript documentation：

另一个常见的用例是当你想生成一些字符串时一些静态字符串+一些变量。为此，您需要一些模板逻辑，这是模板字符串的名称从。这是您可能生成 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}`);

【讨论】：

谢谢...我有什么动态属性？
@testndtv 你能提供更新属性的代码吗？
我的意思是这些是脚本中设置的 JS 对象...所以 var myObj.Url = 'xyz.com'
@testndtv 那么你可以用javascript或jquery重新设置它们，请提供你的javascript代码