Template vs concatanation (v2)

Revision 2 of this benchmark created on

Preparation HTML

<script>
  String.prototype.supplant = function(o) {
   return this.replace(/{([^{}]*)}/g, function(a, b) {
    var r = o[b];
    return typeof r === 'string' || typeof r === 'number' ? r : a;
   });
  };
  
  var template = '<tr><td>{title}</td><td>{type}</td><td><a href="tags/{tag}">{tag}</a></td><td>{created_at}</td></tr>';
  
  var data = {
   title: 'title',
   type: 'type',
   tag: 'tag',
   created_at: 'created_at'
  };
  
  
  function pic(template) {
   template = template.replace(/[\n'\\]/g, '\\$&');
   template = template.replace(/\{(\w*)\}/g, function(str, key) {
    return "'+d['" + key + "']+'";
   });
   return new Function("d", "return '" + template + "'");
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Template
var output = template.supplant(data);
ready
Concatenation
var output = '<tr><td>' + data.title + '</td><td>' + data.type + '</td><td><a href="tags/' + data.tag + '">' + data.tag + '</a></td><td>' + data.created_at + '</td></tr>';
ready
Array join
var output = ['<tr><td>', data.title, '</td><td>', data.type, '</td><td><a href="tags/', data.tag, '">', data.tag, '</a></td><td>', data.created_at, '</td></tr>'].join();
ready
Pic
var tmpl_pic = pic(template);
var output = tmpl_pic(data);
ready

Revisions

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