使用 join(） 或 concat 创建字符串

Make strings with join() or concat?

本文关键字：concat 创建 字符串 join 使用      更新时间：2023-09-26

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

在下面的示例中，数组和join()用于创建 html 字符串，然后插入到 DIV 元素中，其中包含 innerHTML 。

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 测试，第一个示例要慢得多，那么为什么要使用它呢？我还有其他遗漏吗？

这完全取决于用例。

如果数组值的一部分也用于其他一些地方，数组将很有用，

在下面的例子（你的修改后的例子）中，我同时使用了concat和array。我认为这会澄清你:)

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);

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

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

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

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

DFN 库的一些示例：

  • http://dudadornelles.wordpress.com/2010/12/10/mjs-a-javascript-nested-function-dsl-to-generate-html/
  • https://npmjs.org/package/htmlr
  • https://github.com/joestelmach/laconic
  • https://github.com/KoryNunn/crel

（谷歌的"DSL HTML生成器"，你会发现更多）

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

答案可以在这里找到 旧浏览器（IE7-）使用连接而不是串联时工作得更快

相关文章：