谷歌表格Apps Script引入外部JS报错：SyntaxError: expected expression, got '<'

核心问题 #

报错的根本原因是未使用Apps Script模板引擎解析HTML中的模板语法：你通过HtmlService.createHtmlOutputFromFile('FilterUI')加载侧边栏HTML时，文件内的<?= ?>模板标记不会被解析，直接作为文本输出到浏览器，导致JS执行时遇到<符号触发语法错误。此外，用JSON.stringify+eval加载JS代码属于冗余且有安全风险的操作，完全可以用更直接的方式实现。

修复步骤 #

1. 修改侧边栏加载逻辑 #

将showSidebar函数中的createHtmlOutputFromFile替换为createTemplateFromFile并调用evaluate()，让模板引擎处理HTML中的模板语法：

function showSidebar() {
  const htmlTemplate = HtmlService.createTemplateFromFile('FilterUI');
  const html = htmlTemplate.evaluate()
    .setTitle('Filter by Distance')
    .setWidth(400);
  SpreadsheetApp.getUi().showSidebar(html);
}

2. 优化外部JS引入方式 #

直接在FilterUI.html的<script>标签中用不转义的模板语法引入FilterUICode.html的内容，无需JSON.stringify和eval：

<script>
  <?!= include("FilterUICode") ?>
</script>

使用<?!=而非<?=的原因是：不需要对JS代码进行HTML转义（转义会破坏JS语法），!=表示直接输出原始内容。

3. 保留现有include函数 #

你的include函数逻辑正确，无需修改：

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

失败原因说明 #

• createHtmlOutputFromFile仅加载原始HTML内容，不会解析模板标记，导致<?= JSON.stringify(include("FilterUICode")) ?>直接作为无效JS代码输出，触发语法错误。
• 即便模板被解析，JSON.stringify转义JS代码再用eval执行属于冗余操作，直接插入原始JS代码更高效安全。

验证方式 #

修改后执行clasp push --force推送代码，刷新表格并打开侧边栏，debug面板会正常输出日志，控制台也会打印预设的加载信息，所有逻辑将正常运行。

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