Template literal trapped in a string variable

3
votes

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
javascriptnode.jsweb
You use the character ` for template literals, not " - nicovank
What template mechanism are you using? JavaScript template literals? If so, it'd be Hello, ${user.name} and it will not work because template literals are compile-time, not run-time. - cartant
@cartant "Compile time"? JS is interpereted... template arguments are evaluated every time the template literal is evaluated - qxz
@rookie Can you show us more complete JS/HTML that demonstrates what you're trying to do? - qxz
This question may help you: stackoverflow.com/questions/34882100/… - user663031

3 Answers

6
votes

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});
1
votes

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.

0
votes

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