附加为类属性时，Javascript 字符串按空格分隔

Question

我正在尝试将类附加到 <a>元素动态如下。

$(document).ready(function() {
  var class = "abc def ghi";
  var url = "something";
  var innerText = "some random text";

  var innerLink = "<a href=" + url + "><i data-name=" + class + " class=" + class + "></i><span>" + innerText + "</span></a>";

  $("#test").append(innerLink);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">

</div>

字符串类之间可以有空格。当追加发生时，结果字符串看起来像 <a href="something"><i data-name="abc" def ghi class="abc"></i><span>some random text</span></a>

(检查结果中的元素以查看它)。

但我期待的是 <a href="something"><i data-name="abc def ghi" class="abc def ghi"></i><span>some random text</span></a>

代码有什么问题？

Answer 1

如果值为空格 分隔，则需要另一个包装引号:

class='" + class + "'></i><span>" +
//    ^             ^  ------check this

---

var innerLink = "<a href='" + url 
                + "'><i data-name='" + class + "' class='" + class + "'></i><span>" + 
innerText + "</span></a>"; //-----^-------------^-------^-------------^