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>

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>

• javascript
• typescript
• ecmascript-6

• Do you expect the attributes to be html-escaped? Did you mean to use a template literal and just forgot the backticks? It's not quite clear what the question/problem is here. – Bergi Commented Jul 21, 2024 at 19:14

3 Answers 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 mon 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>`