页面运行Handlebars.compile输出异常，同页面控制台运行正常是什么原因

你遇到的情况本质是HTML页面在返回浏览器之前，嵌套的{{message}}语法被服务端/前置模板引擎提前解析替换了。
绝大部分服务端模板引擎（比如EJS、Jinja2、Thymeleaf、Nunjucks等）都默认使用{{变量名}}作为自身的模板变量插值语法，你没有给这些前置模板引擎传递message变量，所以解析时会把{{message}}替换为空字符串，最终浏览器实际接收到的代码是：

let template = Handlebars.compile("Hello ");

运行后自然只会输出Hello。
而你在开发者控制台直接输入的代码不会经过前置模板引擎的解析，{{message}}语法完整保留，所以Handlebars可以正常识别插值变量，输出符合预期。

右键点击页面选择「查看网页源代码」（不要用Elements调试面板，Elements面板是渲染后的最终DOM），找到你写的Handlebars编译代码行，查看其中的{{message}}是否还存在，如果已经消失，即可确认是前置模板引擎提前解析导致的问题。

• 方案1：对Handlebars的插值语法做转义，让前置模板引擎不解析这部分内容，不同模板引擎转义规则不同，比如Jinja2/Nunjucks可以写成{{ '{{message}}' }}，也可以用模板引擎提供的raw标签包裹整个Handlebars相关的代码块，跳过解析。
• 方案2：将Handlebars模板单独存到type="text/x-handlebars-template"的专用script标签中，同样配合raw标签包裹，避免被前置模板引擎解析。

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