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

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);
};

Answer 2

我认为是因为您需要在返回的字符串${test? "name":"\"name name-active\""}中将引号作为转义字符添加>

Answer 3

const addDiv = (test) => {
    const markup = document.createElement('div');
    markup.className = test ? "name" : "name active";
    element.insertAdjacentHTML('beforeend', markup);
};