如何在模板文字中使用变量？答案

【问题标题】：How can i use variable inside template literals?如何在模板文字中使用变量？
【发布时间】：2018-06-04 02:15:22
【问题描述】：

这是我的代码，问题在于变量unosAutor。我需要检查两个字符串是否与助手相等，但如何在模板文字中使用变量unosAutor。当我输入“一些文本”而不是 unosAutor 时，它可以工作。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2 kolokvijum</title>
</head>
<body>
    Unesite ime autora: <input id="imeAutora" type="text" placeholder="Ime autora"><br><br>
    <button id="btnAutor" type="submit" onClick="proveraAutora()">Prikazi</button><br><br>
    <div id="sadrzaj"></div>

    <script src="js/handlebars-v4.0.11.js"></script>
    <script src="js/qwest.min.js"></script>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script>
        function proveraAutora(){
            var unosAutor = document.querySelector("#imeAutora").value;
            var knjigeTemplate = 
            `
                {{#each knjige}}
                {{#equal autor unosAutor}}
                    <h2>{{naslov}} {{autor}}</h2>
                    <img src="{{slika}}"></img>
                    <h4>Broj strana: {{brojstrana}}</h4>
                    <h4><b>Cena: </b>{{cena}}</h4>
                {{/equal}}
                {{/each}}
            `;

            var divSadrzaj = document.querySelector("#sadrzaj");

            qwest.get('data/json.json').then(function(xhr, response){
                var Render = Handlebars.compile(knjigeTemplate);
                divSadrzaj.innerHTML = Render({knjige : response});
            });

        };  
        Handlebars.registerHelper('equal', function(lvalue, rvalue, options) {
            if (arguments.length < 3)
                throw new Error("Handlebars Helper equal needs 2 parameters");
            if (lvalue != rvalue) {
            return options.inverse(this);
            } else {
                return options.fn(this);
            }
        });
    </script>
</body>
</html>

【问题讨论】：

标签： javascript html web

【解决方案1】：

使用normal syntax${unosAutor}

如果您在把手中使用相等的助手，您可能必须包含引号。 "${unosAutor}"，这样你得到的结果为{{#equal autor "AutorX"}}

var unosAutor = 'AutorX'
var knjigeTemplate =
  `
                {{#each knjige}}
                {{#equal autor "${unosAutor}"}}
                    <h2>{{naslov}} {{autor}}</h2>
                    <img src="{{slika}}"></img>
                    <h4>Broj strana: {{brojstrana}}</h4>
                    <h4><b>Cena: </b>{{cena}}</h4>
                {{/equal}}
                {{/each}}
            `;
console.log(knjigeTemplate)

【讨论】：

是的，我试过了，但它不起作用。不知道问题出在哪里：/
如果您在车把中使用相等的助手，您可能必须包含引号。 "${unosAutor}"。检查更新的答案

【解决方案2】：

要在模板文字中使用变量，请像这样使用${yourVariable}：

var variable = "some text";

console.log(`The value of variable is: ${variable}`);

在你的情况下：

var unosAutor = 'some text'
var knjigeTemplate =
  `
                {{#each knjige}}
                {{#equal autor ${unosAutor}}}
                    <h2>{{naslov}} {{autor}}</h2>
                    <img src="{{slika}}"></img>
                    <h4>Broj strana: {{brojstrana}}</h4>
                    <h4><b>Cena: </b>{{cena}}</h4>
                {{/equal}}
                {{/each}}
            `;
console.log(knjigeTemplate)

【讨论】：