javascript - 如何在 Javascript 字符串中使用括号

Question

我正在编写一个从数组创建图像的函数，我需要将一些扩展的 HTML 放入 JavaScript 字符串中。不幸的是，每当我使用括号时，它就会把整个事情搞砸。

有什么帮助吗？

这个:

listItem.innerHTML = "<img src='" + listData[i] + "'>"; */

这不是:

listItem.innerHTML = "<div class='item square' style='background-image: url(" + listData[i] + ")'></div>";

Answer 1

您的代码取决于 listData[i] 在扔到三个地方时是否有效:

• CSS 的 url()
• CSS
• HTML

不应该。首先，用 JavaScript 构建 HTML 并不是一个好主意。如果您确实有足够的标记必须动态构建而无法使用 DOM，请使用知道其目标的模板引擎。在这种情况和大多数情况下，请使用 DOM!

var itemImage = document.createElement('div');
itemImage.className = 'item square';
itemImage.style.backgroundImage = 'url("' + encodeURI(listData[i]) + '")';
listItem.appendChild(itemImage);

这会创建一个元素，为其某些属性赋值，并将其附加到 listItem 中，并且它始终会执行此操作；你不必希望你的报价正确匹配，或者你记得逃避一切。

脚注:encodeURI 和 url() 值周围的双引号的组合几乎肯定会解决任何潜在的问题 - 引号或括号 - 无论您使用哪种方法添加它们，但这并不意味着您应该继续使用 innerHTML。