如何使用Google Apps Script向模板传递多个参数？

当前可用的单参数传参方式 #

我目前通过Google Apps Script向HTML模板传递单个参数的代码如下：

GAS 后端代码 #

function getNewPageContent(clientType, clientName, clientId) {
  if (clientType === "AP") {
    const template = HtmlService.createTemplateFromFile('ap_dashboard');
    template.clientName = clientType;
    return template.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL).getContent();
  }
}

HTML 前端获取代码 #

<script>  
  let clientName = <?= clientName ?>;
</script>

需求与失败的尝试 #

现在需要传递clientName、clientType和clientId三个参数，我尝试用JSON.stringify打包参数的方式但未成功，相关代码如下：

尝试的GAS后端代码 #

function getNewPageContent(clientType, clientName, clientId) {
  if (clientType === "AP") {
    const template = HtmlService.createTemplateFromFile('ap_dashboard');
    template.clientInfo = JSON.stringify({
      clientType: clientType,
      clientName: clientName,
      clientId: clientId
    });
    return template.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL).getContent();
  }
}

尝试的HTML前端代码 #

<script>  
const clientInfo = JSON.parse(<?= clientInfo ?>);
console.log(clientInfo);
const clientType = clientInfo.clientType; 
const clientId = clientInfo.clientId;
const clientName = clientInfo.clientName;
</script>

想问这个方法存在什么问题？或者有哪些正确的实现方式？

问题原因分析 #

你用JSON.stringify打包后直接输出的问题在于：生成的JSON字符串没有被引号包裹，页面渲染后会变成裸的对象字面量，不是合法的JavaScript字符串参数。比如最终渲染的代码会是：

const clientInfo = JSON.parse({"clientType":"AP","clientName":"xxx","clientId":"123"});

这会直接触发语法错误，因为JSON.parse()的参数必须是字符串，而不是原始的对象结构。

正确的实现方式 #

方式1：修正JSON传参的字符串包裹问题 #

在前端代码中给<?= clientInfo ?>加上单引号，将其转为合法的字符串，再用JSON.parse解析：

<script>  
const clientInfo = JSON.parse('<?= clientInfo ?>');
console.log(clientInfo);
const { clientType, clientId, clientName } = clientInfo;
</script>

注意：如果参数值中包含单引号，需要在GAS端提前转义，避免破坏字符串结构：

template.clientInfo = JSON.stringify({
  clientType: clientType,
  clientName: clientName,
  clientId: clientId
}).replace(/'/g, "\\'"); // 转义单引号

方式2：直接传递对象（推荐，更安全简洁） #

Google Apps Script的模板支持直接传递JavaScript对象，不需要手动转JSON，前端可以直接通过JSON.stringify输出为合法的JS对象：

GAS后端代码

function getNewPageContent(clientType, clientName, clientId) {
  if (clientType === "AP") {
    const template = HtmlService.createTemplateFromFile('ap_dashboard');
    template.clientInfo = {
      clientType: clientType,
      clientName: clientName,
      clientId: clientId
    };
    return template.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL).getContent();
  }
}

HTML前端代码

<script>  
const clientInfo = <?= JSON.stringify(clientInfo) ?>;
console.log(clientInfo);
const { clientType, clientId, clientName } = clientInfo;
</script>

这种方式GAS会自动处理特殊字符的转义，避免XSS风险和语法错误，是最推荐的写法。

方式3：单独传递每个参数（简单直接） #

如果参数数量不多，也可以延续你最初的方式，给模板逐个赋值参数：

GAS后端代码

function getNewPageContent(clientType, clientName, clientId) {
  if (clientType === "AP") {
    const template = HtmlService.createTemplateFromFile('ap_dashboard');
    template.clientType = clientType;
    template.clientName = clientName;
    template.clientId = clientId;
    return template.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL).getContent();
  }
}

HTML前端代码

<script>  
const clientType = '<?= clientType ?>';
const clientName = '<?= clientName ?>';
const clientId = '<?= clientId ?>';
console.log(clientType, clientName, clientId);
</script>

注意：字符串类型的参数需要用引号包裹，同时如果参数包含引号，也要在GAS端做转义处理。

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