string interpolation for dynamic html attributes [duplicate]

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

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

You forgot the backticks

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