使用 javascript 呈现字符串模板的最有效方式

Question

我需要在我的 node.js 应用程序中呈现模板字符串。我不想使用 Jade、Ejs、React 或类似的库。出于各种原因，我想使用纯 javascript 来做到这一点。我想知道哪种方法最有效，我想过两种方法。

示例模板字符串可以是：

<html>
<head></head>

 <body>
   <div>{{data1}}</div>
   <span>{{data2}}</span>
 </body> 

</html>

我需要用一些数据替换 {{data1}} 和 {{data2}}。我想知道使用正则表达式和多次调用在性能方面是否是更好的解决方案：

templateString.replace(/{{data1}}/, data)

或循环字符串的每个字符并按以下方式在 for 循环内执行渲染，而不使用正则表达式：

for(i = 0; i < templateString.length; i++) {//binding logic}

我不知道 replace 方法在较低级别如何工作，所以我想知道多次执行它是否比循环一次我的字符串的所有字符在性能上更差。

感谢您的任何建议！

Answer 1

这是我用于 'templating' 的字符串扩展，不需要正则表达式。或许对你有用。应该比regex/replace快，cf this test

String.prototype.format = format;

var str = ('<div>This is {0}</div><span>And here we have {1}</span>' +
           '<span>{2} I repeat {0} or {1}</span>').replace(/</g,'&lt;');

log('<b>the original string</b>: ', str);
log('<b>the formatted string</b>: ', 
     str.format('<i>data1</i>', '<i>data2</i>','&nbsp;--'));
log('<b>back to html</b>: ',
     str.replace(/&lt;/g, '<')
     .format('<i>data1</i>', '<i>data2</i>','&nbsp;--'));

log('or just ... hello {0}'.format('world!'));

function log() {
  var args = Array.apply([], {length: arguments.length})
             .map( function (v, i) { return this[i]; }, arguments);
  document.querySelector('#result').innerHTML += '<p>{0}</p>'.format(args.join(''));
  
}

// this function parses tokens with pattern {\d+} within a string
function format() {
  return function (text, args) {
    var len       = text.length,
        index     = 0,
        parsed    = '',
        currToken = ''
    ;
    while (index < len) {
      if (text[index] === '{' && !isNaN( parseInt(text[index + 1],10) ) ) {
                index += 1;
                currToken = '';
                var istoken = true;
                while (text[index] !==  '}' ) {
                  if ( isNaN( parseInt(text[index],10) ) ) {
                    istoken = false;
                    break;
                  }
                  currToken += text[index];
                  index += 1;
                }
                parsed += istoken && args[+currToken]
                          || '{' + currToken + (text[index] || '');
      }else {
        parsed += text[index];
      }
      index += 1;
    }
    return parsed;
  }(this, arguments);
};

body {
  font: 12px normal verdana, arial;
}

<div id="result"></div>

Answer 2

一个常见的方法是在 replace 回调中处理占位符：

 markup = template.replace(/{{(.+?)}}/g, function(_, placeholder) {
      // return data for the placeholder
 });

Answer 3

更简单的是使用JavaScript 字符串插值:

const resultTemplate = (data) => `
<div>${he.encode(data.param)}</div>
`

const html = resultTemplate(data);

注意：对于我使用的编码：https://www.npmjs.com/package/he

或者如果您需要更多： https://ejs.co/

使用 javascript 呈现字符串模板的最有效方式

Most efficient way for rendering string templates using javascript

javascript

regex

performance

rendering

node.js