动态HTML属性的字符串插值

Question

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

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

- copenndthagen

Answer 1

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

像这样：

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

这是来自typescript文档：

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

- Dipiks

---

谢谢...那我拥有的动态属性怎么办？ - undefined

@testndtv，您能提供更新属性的代码吗？ - undefined

我的意思是这些是在脚本中设置的 JS 对象... 所以 var myObj.Url = 'xyz.com'。 - undefined

@testndtv 好的，你可以使用JavaScript或jQuery重新设置它们，请提供你的JavaScript代码。 - undefined

Answer 2

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

你忘记了反引号

- Seyi Adekoya

Answer 3

目前这个不起作用。

我有一个像这样的字符串，其中行数据属性是某些功能所依赖的。

`<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>`

- Troy Niemeier