typescript 用于动态HTML属性的串内插

ss2ws0br  于 2022-11-26  发布在  TypeScript
关注(0)|答案(3)|浏览(105)

是否可以对以下内容使用字符串插值(注意动态属性)

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

disbfnqx1#

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

你忘了反勾

nhaq1z21

nhaq1z212#

目前无法使用。
我有一个这样的字符串,其中的行的data属性依赖于某些功能。

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

voase2hg3#

您应该使用反勾号来定义具有字符串插值的字符串:``
就像这样:

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}`);

相关问题