How to perform string interpolation in TypeScript?

Question

C# uses string interpolation

int value = 100;
Console.WriteLine($"The size is {value}.");

Output:

The size is 100.

How to do the same thing in TypeScript?

score 507 · Accepted Answer · edited Mar 15 '22 at 05:39

507

In JavaScript you can use template literals:

Template literals are literals delimited with backticks (`)

let value = 100;
console.log(`The size is ${ value }`);

edited Mar 15 '22 at 05:39

answered Jul 30 '17 at 12:48

Nitzan Tomer

any polyfill for typescript like it's available for babel? – Laurence Apr 16 '19 at 09:55
3

@lawphotog polyfill for what? this is supported in typescript. – Nitzan Tomer Apr 16 '19 at 14:24

score 111 · Answer 2 · edited Feb 24 '23 at 18:40

111

Just use special `

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

edited Feb 24 '23 at 18:40

miken32

answered Jul 30 '17 at 12:49

Ygalbel

25

yes, notice it's the special ``, not a `'`. – Felix Sep 21 '18 at 08:15
1

Gives syntax error on IE – Pabodha Wimalasuriya Jan 07 '19 at 11:02
18

I can't believe I got rickrolled here. – Bahrom Jun 08 '21 at 04:46
@Ygalbel:can you tell me how to iterate array with ${arrayData}? – Kapil Soni Apr 18 '22 at 04:43
@KapilSoni check join() function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join – Ygalbel Apr 18 '22 at 07:23
@Ygalbel its not working in my case – Kapil Soni Apr 18 '22 at 08:35
1

i wonder who in the world came with this fancy idea! – Emil Jul 19 '23 at 15:45

score 4 · Answer 3 · answered Feb 24 '23 at 18:20

It can be done with the backtick character: `

Pay attention this is NOT an apostrophe, nor a quote.

Most probably you're on a QWERTY keyboard, so you'll find it JUST below the Esc key in the top left corner:

In case you're using a special keyboard, you can check this exhaustive list to find the backtick.

const value = 100;
console.log(`The size is ${value}.`);

(Valid in both JavaScript and TypeScript)