Question

テンプレートリテラルを使用して、ハンドルバーに似たものをネイティブに実現しようとしています。ここで

私のコードです：私はそれらの変数のいずれかをCONSOLE.LOG場合、しかし

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

：

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機能を実行したときに私が得るということです正しい値を取得します（たとえば、console.log（name）は私の名前の値を取得します）。

文字列を正しく補間したいと思いますが、私は間違っていますか？

Answer 1

' 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>`);