Is there a way to re-use a template literal in Javascript?

Question

I'm trying to re-use a template literal in javascript.

This isn't working:

let int;
let temp= `Number is: ${int}`;
console.log(temp)
// Number is: undefined
int = 1;
console.log(temp)
// Number is: undefined
int = 2;
console.log(temp)
// Number is: undefined

I thought that changing int variable will dynamicaly change in the template. but i learned otherwise :D

Is it even possible and if so what is the right way of doing it?

Thanks.

@KrishnaPrashattsorry my mistake i simplified my example and forgot to change the name — fedesc, May 13 '19 at 12:41

score 8 · Accepted Answer · answered May 13 '19 at 12:41

8

Simply make it to be returned by a function:

let int;
let temp= () => `Number is: ${int}`;
console.log(temp())
// Number is: undefined
int = 1;
console.log(temp())
// Number is: 1
int = 2;
console.log(temp())
// Number is: 2

answered May 13 '19 at 12:41

Mosè Raguzzini

14,237
29
40

2

You could pass `int` as a parameter instead of taking closure over the variable – adiga May 13 '19 at 12:42
1

As I do not know what's the use for the OP code, I prefer to point out the problem with the minimum edit possible to the OP code so he can focus on it. – Mosè Raguzzini May 13 '19 at 12:46

score 3 · Answer 2 · answered May 13 '19 at 12:42

3

Your best option is to create a function for this.

function getTemp(int) {
  return `Number is: ${int}`;
}


let int;
console.log(getTemp(int))
// Number is: undefined
int = 1;
console.log(getTemp(int))
// Number is: undefined
int = 2;
console.log(getTemp(int))
// Number is: undefined

answered May 13 '19 at 12:42

MauriceNino

5,616
1
18
49

or, since we're in ES6 : `const getTemp = int => \`Number is: ${int}\`` – Jeremy Thille May 13 '19 at 12:43
1

Is possible but not recommended. It gets uneasy to read really quickly. @JeremyThille – MauriceNino May 13 '19 at 12:44
3

Only to those who stick with ES5 and don't write ES6 code :) – Jeremy Thille May 13 '19 at 12:45
1

I like a lot about ES6 but this is really bad style imo. At least make it something like that: `const getTemp = (int) => {\n \`Number is: ${int}\` \n}`. @JeremyThille – MauriceNino May 13 '19 at 12:47

score 2 · Answer 3 · answered May 13 '19 at 12:45

2

You can simply use Tagged templates

let temp= (num) => `Number is: ${num}`;

console.log(temp `1`);
console.log(temp `2`)

answered May 13 '19 at 12:45

amrender singh

7,430
3
20
27

Is there a way to re-use a template literal in Javascript?

3 Answers3