javascript - 使用模板文字添加多个类名

Question

我确定这是一个简单的问题，但我不明白为什么这段代码:

const addDiv = (test) => {
    const markup = `
      <div class=${test? "name":"name name-active"}></div>
    `;
    element.insertAdjacentHTML('beforeend', markup);
};

结果为<div class="name" name-active="">而不是<div class="name name-active">

我是否犯了一个简单的错误，或者这是我不理解的行为？谢谢

Answer 1

模板文字内的双引号不是外部字符串的一部分，因此您必须将类值用外部引号括起来。

确保 class=" 和 " 位于模板文字之外

const addDiv = (test) => {
    const markup = `
      <div class="${test? "name":"name name-active"}"></div>
    `;
    element.insertAdjacentHTML('beforeend', markup);
};