string interpolation for dynamic html attributes

Question

Is it possible to use string interpolation for the below (Note the dynamic attributes)

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

You forgot the backticks

Answer 2

This currently doesn't work.

I have a string like this, where the row's data attribute is relied upon for some functionality.

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

And it outputs like this within the attribute strings, which breaks that functionality.

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

We may have to do some concatenation for the time being.
I'm not sure yet what the cleaner, simpler solution is.

This works.

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

Answer 3

You should use the backticks to define a string with string interpollation: ``

Like this:

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

This is from the typescript documentation :

Another common use case is when you want to generate some string out of some static strings + some variables. For this you would need some templating logic and this is where template strings get their name from. Here's how you would potentially generate an html string previously:

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

Now with template strings you can just do:

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

Note that any placeholder inside the interpolation (${ and }) is treated as a JavaScript expression and evaluated as such e.g. you can do fancy math.

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