模板文字被困在字符串变量中答案

【问题标题】：Template literal trapped in a string variable模板文字被困在字符串变量中
【发布时间】：2017-04-25 14:28:01
【问题描述】：

我有一个模板Hello, ${user.name} 存储在一个变量中。我正在使用fs.read 从外部文件中读取此内容。

现在，很明显，当我附加到目标 div 的 innerHTML 时，它会按原样显示字符串，而不是按预期显示“Hello, James”（假设 user.name = James）。
有办法实现吗？

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

Node.js 代码 =>

fs.readFile(__dirname + '/extfile.txt', 'utf8', function (err,data) { 如果（错误）{ 返回控制台.log（错误）； } 别的 { 让 x = JSON.parse(数据); socket.emit('var',x.A); } });

HTML =>

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

【问题讨论】：

您使用字符 ` 作为模板文字，而不是 "
你使用的是什么模板机制？ JavaScript 模板文字？如果是这样，它将是 Hello, ${user.name} 并且它将不起作用，因为模板文字是编译时的，而不是运行时的。
@cartant “编译时间”？ JS 被解释......每次评估模板文字时都会评估模板参数
@rookie 你能给我们展示更完整的 JS/HTML 来演示你正在尝试做什么吗？
这个问题可能对你有帮助：stackoverflow.com/questions/34882100/…

标签： javascript node.js web

【解决方案1】：

模板文字需要$，而不是和号。另外，请记住使用反引号而不是引号。

【讨论】：

【解决方案2】：

我稍微重写了here 提出的解决方案。

在这里，eval_template 评估作为常规字符串提供的 ES6 模板字符串。模板字符串中使用的局部范围内的任何变量都需要作为第二个参数中传递的对象的属性提供（因为使用Function 创建的函数处于全局范围内，无法访问局部变量）。

这非常接近使用eval。您可能想要选择一种不同的方法来处理您的模板字符串。 ES6 模板字符串被设计为创建字符串字面量的运行时机制，而不是模板可以存储和重用的模板语言。

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"}}));

没有理由不能将它与标记的模板字符串一起使用，只要标记作为参数传入：

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

【讨论】：

【解决方案3】：

当我在另一个文件中有标签变量时，有时我也会遇到这个问题，而这些标签应该有一个模板文字。在这种情况下，我通常使用解决方法来模拟这种行为（以此代码为指导：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;
    }

现在在我的代码中，我通过以下方式使用这个助手：

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

标签的结果应该是：

text to literal

正如您所见，使用 {{ }} 符号作为标记， generateLiteral() 使用它们和接收到的参数来使用模板文字更改文本值。这不是最好的方法，但我希望它可以帮助你。

【讨论】：