在新行中输出模板字符串

output template string in a new line

本文关键字：字符串 输出 新行中      更新时间：2023-09-26

当我尝试将'n附加到模板string时，它不会创建新行。我不确定code的行为是否正确。

下面是我的template String: 

var template = 
'My skills: 'n' + 
'<%if(this.showSkills) {%>' +
    '<%for(var index in this.skills) {%>' + 
    '<a href="#"><%this.skills[index]%></a> 'n' +
    '<%}%>' +
'<%} else {%>' +
    '<p>none</p> 'n' +
'<%}%> 'n';
console.log(TemplateEngine(template, {
    skills: ["js", "html", "css"],
    showSkills: true
}));

Template引擎功能

var TemplateEngine = function(html, options) {
    var re = /<%([^%>]+)?%>/g, reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g, code = 'var r=[];'n', cursor = 0, match;
    var add = function(line, js) {
        js? (code += line.match(reExp) ? line + ''n' : 'r.push(' + line + ');'n') :
            (code += line != '' ? 'r.push("' + line.replace(/"/g, '''"') + '");'n' : '');
        return add;
    }
    while(match = re.exec(html)) {
        add(html.slice(cursor, match.index))(match[1], true);
        cursor = match.index + match[0].length;
    }
    add(html.substr(cursor, html.length - cursor));
    code += 'return r.join("");';
    return new Function(code.replace(/['r't'n]/g, '')).apply(options);
}

输出如下:

My skills:   <a href="#">js</a>  <a href="#">html</a>  <a href="#">css</a>

这是一个工作fiddle:

http://jsfiddle.net/nrd2ktxn/

我想要每个output字符串在一个新的行，像这样:

My skills:   
<a href="#">js</a>  
<a href="#">html</a>  
<a href="#">css</a>

这是因为您只需在输入文本周围添加引号并转义内部引号:

'r.push("' + line.replace(/"/g, '''"') + '")'

但是如果line包含行终止符，它将产生无效的JS，当你求值时将抛出。

有效地，删除代码中的所有换行符解决了这个问题: 
code.replace(/['r't'n]/g, '')

但是，它去掉了输入文本中的换行符。

相反，您应该处理行终止符。就像
'r.push("' + line
  .replace(/''/g, '''''')        // Escape the escaping character
  .replace(/"/g, '''"')          // Escape double quotes
  .replace(/'n/g, '''n')         // Escape <LF>
  .replace(/'r/g, '''r')         // Escape <CR>
  .replace(/'u2028/g, '''u2028') // Escape <LS>
  .replace(/'u2029/g, '''u2029') // Escape <PS>
+ '");'


var TemplateEngine = function(html, options) {
  var re = /<%([^%>]+)?%>/g, reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g, code = 'var r=[];'n', cursor = 0, match;
  function escapeText(s) {
    return '"' + s
    .replace(/''/g, '''''')
    .replace(/"/g, '''"')
    .replace(/'n/g, '''n')
    .replace(/'r/g, '''r')
    .replace(/'u2028/g, '''u2028')
    .replace(/'u2029/g, '''u2029')
    + '"';
  }
  var add = function(line, js) {
    js? (code += line.match(reExp) ? line + ''n' : 'r.push(' + line + ');'n') :
    (code += line != '' ? 'r.push(' + escapeText(line) + ');'n' : '');
    return add;
  }
  while(match = re.exec(html)) {
    add(html.slice(cursor, match.index))(match[1], true);
    cursor = match.index + match[0].length;
  }
  add(html.substr(cursor, html.length - cursor));
  code += 'return r.join("");';
  return new Function(code).apply(options);
}    
var template = 
    'My skills: 'n' + 
    '<%if(this.showSkills) {%> 'n' +
    '<%for(var index in this.skills) {%> 'n' + 
    '<a href="#"><%this.skills[index]%></a> 'n' +
    '<%}%> 'n' +
    '<%} else {%> 'n' +
    '<p>none</p> 'n' +
    '<%}%> 'n';
console.log(TemplateEngine(template, {
  skills: ["js", "html", "css"],
  showSkills: true
}));

相关文章：