为何模板字面量看似未被解析却仍能正常运行？

你看到的“未解析”只是视觉错觉，实际模板字面量早就正常工作了，核心原因有两点：

1. 模板字面量在函数定义时就完成了解析
   当执行document.getElementById("B").onclick = function(){ShowAlert(event, ${Message});};这行代码时，${Message}会立即把当时的Message变量值（也就是传入的"Hello World!"）替换进去。这个匿名函数在定义时就通过闭包捕获了解析后的结果，等到你点击按钮执行函数时，传给ShowAlert的已经是解析好的字符串，而非模板字面量语法。

2. alert显示的是函数源码文本，不是运行时逻辑
   在ShowAlert里弹出e.target.onclick，本质是把函数对象转成了字符串，浏览器会输出函数的原始源码文本，所以你会看到${Message}的写法，但这只是源码的展示，完全不影响函数实际运行时的行为——执行时用的是早就解析好的闭包值。

可以做个简单验证：修改Click函数里的Message值，比如：

function Click(Message)
{
   Message = "Changed!";
   document.getElementById("B").onclick = function(){ShowAlert(event, `${Message}`);};
}

点击按钮会弹出"Changed!"，这就证明模板字面量在函数定义时就已经把Message的当前值解析进去了。

附上测试代码：

<!DOCTYPE HTML>
 <html>
<head>
  <title>Untitled</title>
</head>
<body>
<button type="button" id = "B">Click</button>
<script>
Click("Hello World!");
function Click(Message)
{
   document.getElementById("B").onclick = function(){ShowAlert(event, `${Message}`);};
}
function ShowAlert(e, Message)
{
   alert(e.target.onclick + "\n" + Message);
}
</script>
</body>
</html>

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