检测 handlebars.js 解析/语法错误。（客户端模板）答案

【问题标题】：Detect handlebars.js parsing/syntax errors. (client-side templating)检测 handlebars.js 解析/语法错误。（客户端模板）
【发布时间】：2022-02-03 01:40:06
【问题描述】：

我正在创建客户端车把的模板编辑器。基本上，屏幕的一半是文本编辑器，另一半是预览窗口。来自文本编辑器的内容在被handlebars.js 解析后会登录到预览窗口，并在此过程中应用一些变量。

每当我使用handlebar's expression 出现任何语法错误（例如输入{name}} 而不是{{name}}）时，DevTools 中都会出现一条控制台消息。这些消息可能如下所示：

Parse error on line 4:
...m"><p>Hola, {{name}</p></div></body>
---------------------^
Expecting 'CLOSE_RAW_BLOCK', 'CLOSE', 'CLOSE_UNESCAPED', 'OPEN_SEXPR', 'CLOSE_SEXPR', 'ID', 'OPEN_BLOCK_PARAMS', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', 'SEP', got 'INVALID'

我希望能够检测此错误是否触发，并显示错误消息以警告用户。我曾尝试重写 javascript Error() 类但未成功，但它会引发各种错误并且车把崩溃。有什么方法可以访问这些错误吗？

【问题讨论】：

标签： javascript handlebars.js client-side

【解决方案1】：

您可以捕获错误然后显示它。像这样的：

var template = Handlebars.compile('<p>Hola, {{name}</p>');
try {
  template();
} catch (error) {
  var encodedError = error.message.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
    return '&#' + i.charCodeAt(0) + ';';
  });
  document.write('<pre>' + encodedError + '</pre>');
}

&lt;script src="https://s3.amazonaws.com/builds.handlebarsjs.com/handlebars.min-v4.7.7.js"&gt;&lt;/script&gt;

（顺便说一句，here 是我借用了那个 html 实体编码的地方。）

【讨论】：