如何检测浏览器是否支持JavaScript的Template Literals？

阿华AIGC实验室

2026-5-27

解决模板字符串特性检测的问题

你遇到的核心问题是：旧浏览器（比如Mobile Safari 7）在解析阶段就不认识模板字符串的语法，你的try { foo }代码还没到运行时执行的环节，浏览器就已经抛出语法错误了，所以catch根本没法捕获这个错误。

正确的特性检测方法

要避开这个问题，我们可以用动态创建函数的方式来检测，因为函数体的字符串是在运行时才被解析的，不会触发脚本加载阶段的语法错误：

function supportsTemplateLiterals() {
  try {
    // 用new Function来解析包含模板字符串的代码
    new Function('`foo`');
    return true;
  } catch (e) {
    // 解析失败说明不支持
    return false;
  }
}

原理说明

new Function()会把传入的字符串当作函数体进行语法解析，这个过程发生在代码运行时，而不是脚本加载的解析阶段。如果浏览器不支持模板字符串，解析这个函数体时会抛出错误，这时候try-catch就能正常捕获并返回false；如果支持，函数创建成功，返回true。

实际应用示例

你可以用这个检测结果来加载不同的脚本：

if (!supportsTemplateLiterals()) {
  // 加载Babel编译后的兼容脚本
  const script = document.createElement('script');
  script.src = '/path/to/your-compiled-script.js';
  document.head.appendChild(script);
} else {
  // 加载原生ES6脚本
  const script = document.createElement('script');
  script.src = '/path/to/your-es6-script.js';
  document.head.appendChild(script);
}