用 join() 或 concat 创建字符串？ [复制]答案

【问题标题】：Make strings with join() or concat? [duplicate]用 join() 或 concat 创建字符串？ [复制]
【发布时间】：2013-09-15 14:12:15
【问题描述】：

我遇到了一些我觉得很有趣的代码，但我不确定为什么要使用这种编码模式。也许有人可以启发我？

在下面的示例中，Array 和 join() 用于创建一个 html 字符串，然后插入到带有 innerHTML 的 DIV 元素中。

var div = document.createElement('div');
div.innerHTML = [
   '<div id="view">',
     '<button class="cancel">cancel</button>',
     '<ul id="presets"></ul>',
   '</div>'
 ].join('');
document.body.appendChild(div);

为什么要这样做？为什么不创建一个String，如下所示。

var div = document.createElement('div');
div.innerHTML =
   '<div id="view">' +
     '<button class="cancel">cancel</button>' +
     '<ul id="presets"></ul>' +
   '</div>';
document.body.appendChild(div);

我跑了一个jsperf.com test，第一个例子要慢得多，为什么要使用它呢？我还缺少其他方面吗？

【问题讨论】：

标签： javascript performance testing

【解决方案1】：

没有真正的区别。也许编写该代码的人不知道如果您使用 + 运算符，您可以将字符串拆分为多行？

他们同样好，也就是说，同样糟糕。

innerHTML 不好，因为很难开发交互式应用程序。一旦输出 HTML，就很难修改（部分）HTML。您需要在任何地方插入 id，一个用于稍后要引用的每个元素。如果您正在执行循环或生成非常动态的数据，您将需要一些巧妙的方法来生成 id。如果您想添加事件innerHTML 不会帮助您。这真是一场噩梦。

如果您只是拥有对元素的所有引用，会不会容易得多？您可以制作一个允许您内联添加事件的 DSL。随时随地获取参考。使用（变量）作用域来处理嵌套结构。等等

DFN 库的一些示例：

（Google for "DSL HTML generator" 你会找到更多）

相关：（和有趣的阅读）http://blog.korynunn.com/javascript/the-dom-isnt-slow-you-are/

【讨论】：

同样糟糕？你有更好的建议吗？
不要使用innerHTML。对于较小的项目，以及像 jQuery 这样的东西，我可以理解这种诱惑。我同意 DOM API 充其量是笨重的。一个很好的解决方案是使用专门的 DFN 语言 (DocumentFragmentNotation)。
现在你真的引起了我的兴趣。 :-) 为什么innerHTML 不好？您是否有任何链接可以阅读有关 DFN 的更多信息？
抛开拼写错误，innerHTML 不够灵活。它不允许您（轻松）构建动态应用程序。我更新了我的答案。

【解决方案2】：

这完全取决于用例。

如果在其他地方也使用了部分数组值，则数组将很有用，

在下面的示例中（您的修改示例）我同时使用了 concat 和数组。我想这会澄清你:)

var div = document.createElement('div');
var div2 = document.createElement('div2');
var arrayData = [
       '<div id="view">' +
         '<button class="cancel">cancel</button>' +
         '<ul id="presets"></ul>'+
       '</div>',

       '<div id="view2">' +
         '<button class="submit">submit</button>' +
         '<ul id="presets"></ul>'+
       '</div>'
     ];

div.innerHTML = arrayData.join('');
// Only 1st index of arrayData string is needed here.
div2.innerHTML = arrayData[1];

document.body.appendChild(div);
document.body.appendChild(div2);

【讨论】：

【解决方案3】：

可以找到答案here旧浏览器（IE7-）使用连接而不是连接更快地工作

【讨论】：