Fast way to join a complex HTML string. (v7)

Revision 7 of this benchmark created by 十年灯 on October 15, 2014

Description

Setup

var aString = 'My name is ${name},I\'m ${age}.My name is ${name},I\'m ${age}.My name is ${name},I\'m ${age}.My name is ${name},I\'m ${age}.My name is ${name},I\'m ${age}.My name is ${name},I\'m ${age}.'
    
      function nativeJoin(group) {
        return 'My name is ' + group.name + ',I\'m ' + group.age + '.My name is ' + group.name + ',I\'m ' + group.age + '.My name is ' + group.name + ',I\'m ' + group.age + '.My name is ' + group.name + ',I\'m ' + group.age + '.My name is ' + group.name + ',I\'m ' + group.age + '.My name is ' + group.name + ',I\'m ' + group.age + '.'
      }
    
      function mix(str, group) {
        return str.replace(/\$\{([^{}]+)\}/gm, function(m, n) {
          return (group[n] != undefined) ? group[n] : '';
        });
      }
    
    
      function mix1(str, group) {
        return str.replace(/\$\{[^{}]+\}/gm, function(m, n) {
          n = m.slice(2, -1);
          return (group[n] != void 1) ? group[n] : '';
        })
      }
    
      function loopMix0(str, group) {
        var reg = /\$\{([^{}]+)\}/gm,
          res;
        while (res = reg.exec(str)) {
          str = str.substr(0, res.index) + ((group[res[1]] != undefined) ? group[res[1]] : '') + str.substr(res.index + res[0].length);
        }
        return str;
      }
    
      function loopMix1(str, group) {
        var reg = /\$\{([^{}]+)\}/gm,
          res, returnString = '',
          start = 0;
        while (res = reg.exec(str)) {
          returnString += str.substring(start, res.index) + ((group[res[1]] != undefined) ? group[res[1]] : '');
          start = res.index + res[0].length;
        }
        returnString += str.substr(start);
        return returnString;
      }
    
      function loopMix2(str, group) {
        var reg = /\$\{([^{}]+)\}/gm,
          res, returnString = '',
          start = 0;
        while (res = reg.exec(str)) {
          returnString += str.substring(0, res.index) + ((group[res[1]] != undefined) ? group[res[1]] : '');
          start = res.index + res[0].length;
          str = str.substr(start);
          // console.log(str)
          reg.lastIndex = 0;
        }
        returnString += str;
        return returnString;
      }
    
    
      function loopMix2_1(str, group) {
        var reg = /\$\{[^{}]+\}/gm,
          res, returnString = '',
          start = 0,
          n;
        while (res = reg.exec(str)) {
          n = res[0].slice(2, -1);
          returnString += str.substring(0, res.index) + ((group[n] != undefined) ? group[n] : '');
          start = res.index + res[0].length;
          str = str.substr(start);
          // console.log(str)
          reg.lastIndex = 0;
        }
        returnString += str;
        return returnString;
      }
    
      function loopMix3(str, group) {
        var index = 0,
          close = 0,
          returnString = '';
        while ((index = str.indexOf('${', index)) !== -1) {
          returnString += str.substring(close, index);
          close = str.indexOf('}', index);
          var name = str.substring(index + 2, close);
          returnString += (group[name] != undefined) ? group[name] : ''
          index = close;
          close += 1;
        }
        returnString += str.substr(close);
        return returnString;
      }

Test runner

mix(aString, {
  name: 'LIX',
  age: 11
})

loopMix0(aString, {
  name: 'LIX',
  age: 11
})

loopMix1(aString, {
  name: 'LIX',
  age: 11
})

loopMix2(aString, {
  name: 'LIX',
  age: 11
})

loopMix3(aString, {
  name: 'LIX',
  age: 11
})

mix1(aString, {
  name: 'LIX',
  age: 11
})

loopMix2_1(aString, {
  name: 'LIX',
  age: 11
})

nativeJoin({
  name: 'LIX',
  age: 11
})

Revisions

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

• Revision 7: published by 十年灯 on October 15, 2014