如何在 JavaScript 中使用反引号在 html 代码中使用变量？

Question

我有一个变量，使用 JavaScript 反引号定义了几个值。如何使用带有反引号的另一个变量？

var liElem = '';
$('button').click(function(){
var newData = 'This is new data'

liElem = `<ul>
                <li class=" ' + newData + ' ">Good news</li>
                        <li class="icon-text-dark-yellow">Fair</li>
                        <li class="icon-text-dark-red">Poor</li>
                        <li class="icon-text-light-gray">N/A</li>
                    </ul>`;
                    
                    
console.log(liElem);
                    });
                    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>click</button>

为什么newData变量里面不可读？JavaScript 反引号？有没有办法做到这一点？

答案将不胜感激！

Answer 1

它被称为模板文字，如文档所述：

模板文字是允许嵌入表达式的字符串文字。您可以将多行字符串和字符串插值功能与它们一起使用。在 ES2015 规范的早期版本中，它们被称为“模板字符串”。

您想要做的称为表达式插值，您可以使用${variableName}.

您需要使用如下：

const newData = 'This is new data';
const liElem = `<ul>
   <li class="${newData}">Good news</li>
   <li class="icon-text-dark-yellow">Fair</li>
   <li class="icon-text-dark-red">Poor</li>
   <li class="icon-text-light-gray">N/A</li>
</ul>`;
                    
console.log(liElem);

我希望这有帮助！