模板文字被困在字符串變量中

Question

我有一個模板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) {
  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;
}

Answer 1

我稍微重寫了這里提出的解決方案。

在這里， 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});

Answer 2

當我在另一個文件中有我的標簽變量時，有時我也會遇到這個問題，並且這些標簽應該有一個模板文字。 在這種情況下，我通常使用一種解決方法來模擬這種行為（以此代碼為指導：D）

標簽.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() 使用它們和接收到的參數來使用模板文字更改文本值。 這不是最好的方法，但我希望它可以幫助你。

Answer 3

模板文字需要$ ，而不是 & 符號。 另外，請記住使用反引號而不是引號。