求助：在Apps Script脚本小程序中实现变量赋值的问题

错误原因 #

核心问题是Apps Script HTML模板的scriptlet使用错误：

• <? ... ?> 仅用于执行服务器端代码，不会将代码执行结果输出到最终渲染的HTML中；
• 你试图用<? i.toString() ?>给客户端JS变量赋值，但这段代码仅在服务器端执行了toString()方法，没有把结果输出到JS代码里，导致渲染后的JS出现语法错误（比如var iAsString = ;），最终整个window.onload函数无法正常执行。

修正方案 #

使用<?= 表达式 ?>语法（打印表达式），将服务器端变量的结果输出到客户端JS中。以下是两种可行的修正方式：

方式1：直接在HTML字符串中嵌入服务器端变量 #

简化代码，无需额外定义iAsString，直接在newRound的字符串里拼接服务器端的i：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div id='scoreboard'></div>
    
    <script>
      const scoreboard = document.getElementById("scoreboard");

      window.onload = function() {
        <? for (var i = 0; i <= 2; i++) { ?>
          var newRound = '<div id="round_<?= i ?>"></div>';
          scoreboard.insertAdjacentHTML("beforeend", newRound);
        <? } ?>
      }
    </script>
  </body>
</html>

方式2：正确输出i到客户端JS变量 #

如果需要保留iAsString变量，用<?= i ?>（或<?= i.toString() ?>）输出变量值：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div id='scoreboard'></div>
    
    <script>
      const scoreboard = document.getElementById("scoreboard");

      window.onload = function() {
        <? for (var i = 0; i <= 2; i++) { ?>
          var iAsString = <?= i ?>; // 或<?= i.toString() ?>，效果一致
          var newRound = '<div id="round_'+iAsString+'"></div>';
          scoreboard.insertAdjacentHTML("beforeend", newRound);
        <? } ?>
      }
    </script>
  </body>
</html>

原理说明 #

渲染后的客户端JS代码会变成如下格式（以i=0/1/2为例），语法完全正确，能正常创建子div：

window.onload = function() {
  var newRound = '<div id="round_0"></div>';
  scoreboard.insertAdjacentHTML("beforeend", newRound);
  var newRound = '<div id="round_1"></div>';
  scoreboard.insertAdjacentHTML("beforeend", newRound);
  var newRound = '<div id="round_2"></div>';
  scoreboard.insertAdjacentHTML("beforeend", newRound);
}

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