By Piyush Pandey

2016-12-10 03:11:42 8 Comments

I have a template Hello, ${} stored in a variable. I am reading this from an external file using

Now, obviously when I attach to the innerHTML of a target div, it shows the string as it is and not "Hello, James" (assuming = James) as intended.
Is there a way to make it happen?

extfile.txt =>
{"A":"`Welcome, ${}`"}

Node.js code =>

fs.readFile(__dirname + '/extfile.txt', 'utf8', function (err,data) {
  if (err) {
    return console.log(err);
  } else {
    let x = JSON.parse(data);


  getElementById('target').innerHTML = x;


@Mest 2019-05-06 14:11:59

I also had this problem sometimes when I have my labels variables in another file, and those labels should have a template literal. I this cases I usually use a workaround to simulate this behaviour (take this code as a guide :D )


export default:{
    labelWithSpeudoliteral: "text to {{change}}"


    generateLiteral(s, params) {
        const entries = Object.entries(params);
        let sentence = s;
        entries.forEach((entry) => {
                const literal = `{{${entry[0]}}}`
                sentence = sentence.replace(literal, entry[1]);
        return sentence;

Now in my code I use this helper the following way:

console.log(generateLiteral(labels.labelWithSpeudoliteral, {'change': 'literal'})

And the result of the label should be:

text to literal

As you can see using the {{ }} symbols as marks, generateLiteral() use them and the params received to change the text value with the template literal. It is not the best way, but I hope it can help you.

@user663031 2016-12-10 08:06:34

I've slightly rewritten a solution presented here.

Here, eval_template evaluates an ES6 template string provided as a regular string. Any variable in local scope used in the template string needs to be provided as a property of the object passed in the second parameter (because functions created using Function are in the global scope and cannot access local variables).

This is perilously close to using eval. You might want to choose a different approach to handling your template strings. ES6 template strings are designed to be a run-time mechanism to create string literals, not a templating language whose templates can be stored and re-used.

function eval_template(s, params) {
  return Function(...Object.keys(params), "return " + s)

const template = "`Welcome, ${}`";
console.log(eval_template(template, {user: {name: "James"}}));

There is no reason this could not be used with a tagged template string, as long as the tag is passed in as a parameter:

eval_template("tag`${boo}`", {tag, boo});

@davidatthepark 2016-12-10 03:17:48

Template literals need a $, not an ampersand. Also, remember to use backticks and not quotes.

Related Questions

Sponsored Content

67 Answered Questions

[SOLVED] How to replace all occurrences of a string?

47 Answered Questions

[SOLVED] Sort array of objects by string property value

39 Answered Questions

[SOLVED] Creating multiline strings in JavaScript

81 Answered Questions

[SOLVED] How can I convert a string to boolean in JavaScript?

  • 2008-11-05 00:13:08
  • Kevin
  • 2056486 View
  • 2591 Score
  • 81 Answer
  • Tags:   javascript

24 Answered Questions

[SOLVED] Check if a variable is a string in JavaScript

  • 2010-10-30 14:36:34
  • Olical
  • 1459170 View
  • 1780 Score
  • 24 Answer
  • Tags:   javascript

46 Answered Questions

[SOLVED] How can I check for an empty/undefined/null string in JavaScript?

92 Answered Questions

[SOLVED] How do I make the first letter of a string uppercase in JavaScript?

3 Answered Questions

73 Answered Questions

[SOLVED] How can I get query string values in JavaScript?

6 Answered Questions

[SOLVED] Read environment variables in Node.js

Sponsored Content