在ES6中插入變量

我正在嘗試使用模板文字來本地實現與handlebars類似的操作。在ES6中插入變量

這裏是我的代碼：

let myTemplate = '<div class="tab" data-group="${id}">${name}</div>'; 

let doYourMagic = function(){ 
    let tabInfo = { 
     id: 1234, 
     name: "Alex" 
    } 

    let { id, name } = tabInfo; 

    console.log(myTemplate); 
})

現在的問題是，當我運行doYourMagic功能我得到：

<div class="tab" data-group="${id}">${name}</div>

但是，如果我CONSOLE.LOG這些變量的一個我得到正確的值（例如，console.log（name）會得到我的名字值）。

我想正確插入字符串，我做錯了什麼？

來源

2016-05-16 alemur

我不能那麼恰當地告訴但你似乎對你的字符串使用單引號（'''）。對於字符串插值，你需要使用小傾斜的引用。您用於突出顯示SO評論中的代碼的那個。 '''[見]（https://jsfiddle.net/bjpa89ou/2/） – ste2425

謝謝，就是這樣！如此愚蠢！ – alemur

沒有問題發生在我們所有:)，下面鏈接的問題的完整答案。 – ste2425

而不是聲明您的字符串與' theString '，您必須使用像這樣的模板文字符號` theString `。

所以，你的代碼變成：

let myTemplate = `<div class="tab" data-group="${id}">${name}</div>`; 
//> <div class="tab" data-group="1234">Alex</div>

你也可以把它簡化成這樣，例如，這也將做的工作：

let tabInfo = { 
    id: 1234, 
    name: "Alex" 
}; 
console.log(`<div class="tab" data-group="${tabInfo.id}">${tabInfo.name}</div>`);

來源

2018-01-26 14:35:33 NatNgs

在ES6中插入變量

回答

相關問題