javascript - 如何在 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

它叫做 template literals ，如文档所述:

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were called "template strings" in prior editions of the ES2015 specification.

你想要做的是所谓的表达式插值，你可以用 ${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);

希望对您有所帮助!