By Piyush Pandey


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

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

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

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

Node.js code =>

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

HTML =>

socket.on('var',function(x)){
  getElementById('target').innerHTML = x;
}

3 comments

@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 )

labels.js:

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

MyHelper.js:

    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)
    (...Object.values(params));
}

const template = "`Welcome, ${user.name}`";
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

85 Answered Questions

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

37 Answered Questions

[SOLVED] Creating multiline strings in JavaScript

44 Answered Questions

[SOLVED] How to check empty/undefined/null string in JavaScript?

43 Answered Questions

[SOLVED] Sort array of objects by string property value

59 Answered Questions

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

6 Answered Questions

[SOLVED] Read environment variables in Node.js

23 Answered Questions

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

  • 2010-10-30 14:36:34
  • Olical
  • 1254494 View
  • 1562 Score
  • 23 Answer
  • Tags:   javascript

3 Answered Questions

75 Answered Questions

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

  • 2008-11-05 00:13:08
  • Kevin
  • 1818383 View
  • 2341 Score
  • 75 Answer
  • Tags:   javascript

73 Answered Questions

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

Sponsored Content