寻求无需构建步骤的JavaScript反引号模板字符串IE11兼容方案

当然有可行的方案！既然你不想用Babel转译、不想依赖独立模板引擎，还得和ES5代码共存并适配IE11，我们可以用轻量级的自定义函数来模拟模板字符串的核心功能，完全符合你的需求。

方案1：模拟ES6模板字符串的函数式写法 #

我们可以写一个极简的函数，模拟模板字符串的“字符串片段+变量插入”逻辑，写法接近原生模板字符串，且完全兼容ES5：

// 自定义模板函数
function tmpl(strings) {
  var values = Array.prototype.slice.call(arguments, 1);
  var result = '';
  // 拼接字符串片段和变量
  for (var i = 0; i < strings.length; i++) {
    result += strings[i];
    if (i < values.length) {
      result += values[i];
    }
  }
  return result;
}

// 使用示例
var title = 'My Template String';
var content = 'Some more stuff here...';
var textTemplate = tmpl(
  '<h1>', title, '</h1> <p>', content, '</p>'
);

这个函数的工作逻辑和ES6模板字符串一致：把传入的字符串片段和变量按顺序拼接，最终生成完整的模板内容。

方案2：带占位符的单字符串模板（更易读） #

如果模板内容较长，方案1的参数会显得零散，我们可以改用“占位符替换”的方式，用一个普通字符串写模板，再通过函数替换变量：

// 带占位符的模板渲染函数
function render(templateStr, data) {
  // 匹配{{变量名}}格式的占位符
  return templateStr.replace(/{{(\w+)}}/g, function(match, key) {
    // 替换为对应变量值，无值则为空字符串
    return data[key] || '';
  });
}

// 使用示例
var templateData = {
  title: 'My Template String',
  content: 'Some more stuff here...'
};
var textTemplate = render(
  '<h1>{{title}}</h1> <p>{{content}}</p>',
  templateData
);

这种方式更贴近传统模板的写法，可读性更强，而且所有代码都在同一个文件里，IE11可以直接运行。

为什么不能直接用反引号？ #

这里要说明：IE11完全不支持ES6的反引号模板字符串语法，直接写反引号会触发语法错误，所以我们必须用ES5兼容的语法来模拟其功能——这也是你提到“polyfill不合适”的原因，因为polyfill只能补全API，无法修复语法层面的兼容性问题。

可选hack：用注释模拟反引号视觉写法 #

如果你特别想保留类似反引号的多行模板视觉效果，可以用多行注释配合函数提取内容，不过这属于小技巧，可读性略逊于前两种方案：

function getTmpl(data) {
  // 提取函数后的多行注释内容
  var template = getTmpl.toString().match(/\/\*([\s\S]*?)\*\//)[1];
  // 替换占位符
  return template.replace(/{{(\w+)}}/g, function(match, key) {
    return data[key] || '';
  });
}

// 使用时，模板写在函数调用后的注释里
var textTemplate = getTmpl({
  title: 'My Template String',
  content: 'Some more stuff here...'
});
/*
<h1>{{title}}</h1>
<p>{{content}}</p>
*/

总结 #

以上所有方案都不需要构建步骤、不需要独立模板文件，完全和ES5代码共存，且能完美适配IE11，完全满足你的需求。

内容的提问来源于stack exchange，提问作者UglyBoogaloo