如何构建一个长字符串

Question

我需要用JavaScript构建一个长字符串。这是我尝试的方法：

var html = '<div style="balbalblaba">&nbsp;</div>';
for(i = 1; i <= 400; i++){
   html+=html;
};

当我在火狐浏览器中执行时，它需要很长时间或者导致崩溃。有什么最好的方法来解决这个问题？通常构建JS中大字符串的最佳方法是什么。

有人能帮我吗？

- meo

---

重复？https://dev59.com/63VC5IYBdhLWcg3wtzqs - Adriaan Stander

Answer 1

我猜你的意思是 html += html;。

如果你这样做，你的html字符串长度将会是 37 × 2 的 400 次方 = 9.5 × 10 的 121 次方，超出了任何浏览器、任何计算机、在任何已知的宇宙中所能处理的限制。

如果你只是想要重复那个字符串 400 次，请使用：

var res = "";
for (var i = 0; i < 400; ++ i)
   res += html;
return res;

或者

var res = [];
for (var i = 0; i < 400; ++ i)
   res.push(html);
return res.join("");

请查看Repeat String - Javascript以获取更多选项。

---

^{[1]: 如同"这个宇宙"。}

- kennytm

---

+1 但应该是“...在已知宇宙中的任何浏览器和任何计算机上...” - MaxGuernseyIII

谢谢提供链接！是的，我在简化示例时犯了一个错误！非常感谢您的解释！为什么展平数组比连接字符串更快呢？ - meo

@david：对于长字符串，Array.join 比 += 更高效。我不知道现在 JS 优化的情况，但使用 .join 构建字符串仍然更好，以适应旧版浏览器。 - kennytm

哦，我对旧浏览器并不在意，这只是一个视觉实验。我用div填充屏幕上的像素。(窗口大小/像素大小(10x10))。现在它可以工作了，但仍然非常缓慢。我想知道如何优化它...但那将很快成为另一个问题。无论如何，感谢您的出色回答。 - meo

Answer 2

在一些浏览器中（咳咳IE6*咳咳*），字符串拼接速度非常慢。使用数组连接应该比循环拼接要快得多：

var arr = new Array(401);
var html = arr.join('<div style="balbalblaba">&nbsp;</div>');

- Andy E

---

你可以省略 new 前缀，只使用 Array(401) 即可。 - James

@J-P：你可以这样做，但行为完全相同，我通常更喜欢将Array()对象视为构造函数来创建数组 :-) - Andy E

@sterofrog：就像我所做的那样，当我将这个写入我的代码时。有时候我更喜欢分开回答以获得额外的清晰度。各有所好，对吧？;-) - Andy E

Answer 3

另一种方法是创建一个字符串数组，然后使用Array.join('')。这实际上是构建字符串的Python方式，但它也适用于JavaScript。

- Kathy Van Stone

Answer 4

var src = '<div style="balbalblaba">&nbsp;</div>';
var html = '';
for(i = 1; i <= 400; i++){
   html=+src;
};

你的代码将字符串翻倍了400次。

- Devon_C_Miller

---

我认为 html=+src 会使 html 等于0。 - Gabe