在JavaScript对象中的字符串拼接

Question

我相信这个问题的答案很简单，但我找不到它。

我知道如何在JavaScript中连接普通字符串，但如何在对象内部连接字符串呢？

我需要这样做是因为我正在阅读一个XML文件并创建一组链接的HTML列表。每次循环时，我都想创建一个新的<li>包含该链接。如何获取字符串的当前值，然后将新链接附加在末尾？读完XML后，我将把HTML附加到页面上。

我已经尝试过：

carParks.links = carParks.links + "<li><a href=\"#\">car park</a></li>";

没有成功。

非常感谢任何帮助。

- Phil Molloy

---

就字符串拼接语法而言，您所拥有的是可以的。您的问题可能出在其他地方（例如carParks对象本身，或调用代码等）。 - Roatin Marth

我认为你是对的。我刚刚用相同的代码编写了一个简化的测试脚本，它可以正常工作。问题一定出在其他地方。谢谢。 - Phil Molloy

Answer 1

使用对象属性进行字符串拼接与其他任何操作一样。理论上，只要carParks.links是可写属性，你所提供的代码应该是可行的。当你使用+或+=运算符进行字符串拼接时（除非将它们用作算术运算符），操作数会被转换为字符串。例如：

var carParks = {};
carParks.links = carParks.links + "Test";
// -> "undefinedTest", because carParks.links was undefined

如果你收到错误信息，请检查carParks是否已定义，并且是一个具有可写属性的JavaScript对象（例如不是外部接口的一部分）。如果没有收到错误，请确保carParks.links不是数字。如果这些方法都无效，请发布更多周围代码，我会再试一次。

- Andy E

---

谢谢Andy，我现在意识到语法是正确的，但是我后来在代码中覆盖了那个特定的属性。 - Phil Molloy

Answer 2

如果你生成了大量的链接，可以尝试使用 /w array.join();

var tmp = [];

for ([iterate over xml]) {
     tmp.push("<li><a href=\"#\">car park</a></li>");
}

carParks.links = tmp.join('');

比重复字符串连接更快

或者，如果您创建一个HTML DocumentFragment，浏览器会为您执行连接操作...当附加DocumentFragment时，只有DocumentFragment的childNodes附加到具体元素。布局仅计算一次，而不是每个元素附加一次，您无需关心字符串连接执行时间...

var docFrag = document.createDocumentFragment();
for ([iterate over xml]) {
     var current = document.createElement('li');
     current.innerHTML = "<a href=\"#\">car park</a>";
     docFrag.appendChild(current);
}

theElementToAppendMyList.appendChild(docFrag);

- Roki

Answer 3

这是基本的字符串连接，但根据您的性能考虑，有不同的方法可以实现这一点；基本上，它归结为使用语言提供的字符串连接运算符或数组连接。前者非常简单，但在旧浏览器上速度较慢，而后者则更快。

在您的示例中，您已经很好地使用了字符串连接。另一种方法是使用+=运算符：

carParks.links = carParks.links + "<li><a href=\"#\">car park</a></li>";

数组连接的方法如下：

var buffer = [];
while(node != null) {
   buffer.push("<li><a href=\"#\">car park</a></li>");
}
carParks.links = buffer.join('');

---

数组连接方法产生的垃圾较少，但我发现在新的浏览器上运行大型列表（10,000+项）时速度较慢。

- Bryan Kyle