在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中插入变量

回答

相关问题