Best js string builder (v5)

Revision 5 of this benchmark created by Nik Rassadin on

Description

Try to figure out the best way to build strings in javascript.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js">
</script>
<script>
  //
  // Replace prototype
  //
  String.prototype.format = function() {
    var args = arguments;
    return this.replace(/\{(\d)\}/g, function(a, b) {
      return typeof args[b] != 'undefined' ? args[b] : a;
    });
  }

  // codeproject formatter
  String.prototype.format2 = function(args) {
    var str = this;
    return str.replace(String.prototype.format.regex, function(item) {
      var intVal = parseInt(item.substring(1, item.length - 1));
      var replace;
      if (intVal >= 0) {
        replace = args[intVal];
      } else if (intVal === -1) {
        replace = "{";
      } else if (intVal === -2) {
        replace = "}";
      } else {
        replace = "";
      }
      return replace;
    });
  };
  String.prototype.format.regex = new RegExp("{-?[0-9]+}", "g");

  //
  // StringBuilder class using join
  //
  // Initializes a new instance of the StringBuilder class
  // and appends the given value if supplied


  function StringBuilder(value) {
    this.strings = new Array("");
    this.append(value);
  }

  // Appends the given value to the end of this instance.
  StringBuilder.prototype.append = function(value) {
    if (value) {
      this.strings.push(value);
    }
  }

  // Clears the string buffer
  StringBuilder.prototype.clear = function() {
    this.strings.length = 1;
  }

  // Converts this instance to a String.
  StringBuilder.prototype.toString = function() {
    return this.strings.join("");
  }
</script>

Setup

window.txt = "<ul><li>{0}</li><li>{1}</li><li>{2}</li></ul>";
    window.t1 = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.";
    window.t2 = "Aliquam tincidunt mauris eu risus.";
    window.t3 = "Vestibulum auctor dapibus neque.";

Test runner

Ready to run.

Testing in
TestOps/sec
JS normal concat
window.res = "<ul>";
window.res += "<li>" + window.t1 + "</li>";
window.res += "<li>" + window.t2 + "</li>";
window.res += "<li>" + window.t3 + "</li>";
window.res += "</ul>";
ready
JS replace function
window.res = window.txt.replace('{0}', window.t1).replace('{1}', window.t2).replace('{2}', window.t3);
ready
jquery validate format function
window.res = jQuery.validator.format(window.txt, window.t1, window.t2, window.t3);
ready
String format function
window.res = window.txt.format(window.t1, window.t2, window.t3);
ready
StringBuilder class using 'join'
// create a StringBuilder
var sb = new StringBuilder();

// append the text
sb.append("<ul>");
sb.append("<li>" + window.t1 + "</li>");
sb.append("<li>" + window.t2 + "</li>");
sb.append("<li>" + window.t3 + "</li>");
sb.append("</ul>");

// get the full string value
var s = sb.toString();
ready
String Format2
window.res = window.txt.format2(window.t1, window.t2, window.t3);
ready
Array join
var sb = [];

sb.push("<ul>");
sb.push("<li>" + window.t1 + "</li>");
sb.push("<li>" + window.t2 + "</li>");
sb.push("<li>" + window.t3 + "</li>");
sb.push("</ul>");

window.res = sb.join('');
 
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.