JavaScript拼接字符串的两种常用方式与性能对比

作者:巡夜人时间:2026-10-30 13:16:37浏览:165

本文介绍JavaScript中拼接字符串以构建DOM元素的两种常见方法:直接相加和使用数组的join()方法。通过实际代码示例对比发现,利用数组join()进行拼接在效率上通常优于直接字符串相加,适合处理大量字符串连接的场景。

JavaScript字符串拼接的两种方法

具体实现方式如下所示:


function(msgArr) {
  var len = msgArr.length;
  var n = 0 ;
  var htmlSpan = "";
  for (var j = 0; j < len - 1; j++) {
    htmlSpan += '<span>·</span>';
  }
  htmlSpan += '<span class="on">·</span>';
  var imgs = [];
  var img = [];
  img[0] = '<a href="' + ctx + '/webservice/dish/detail?id=';
  img[1] = '#';
  img[2] = '"><img src="';
  img[3] = '#';
  img[4] = '"></a>';

  for (var i = 0; i < len; i++) {
    img[1] = msgArr[i].id;
    img[3] = msgArr[i].pic;
    imgs.push(img.join(""));
  }
  $("#banner_list").html(imgs.join(""));
  $(".dots").html(htmlSpan);
}

上述代码源自笔者近期编写的脚本。该函数展示了两种将字符串拼接并用于向DOM添加新元素的技术:第一种是直接进行字符串相加;第二种则是利用数组的join()方法。相比之下,第二种方法的执行效率更高。

以上就是JavaScript中两种字符串拼接方法的详细介绍,希望能为读者提供参考,并感谢大家的支持。

作者最新文章