您可以混合使用 Apps 脚本代码和 HTML 轻松制作动态网页。如果您使用过混合了代码和 HTML 的模板语言（如 PHP、ASP 或 JSP），您应该熟悉语法。
Scriptlet
Apps 脚本模板可以包含三个特殊标记，称为 scriptlet。在 scriptlet 内，您可以编写可在普通 Apps 脚本文件中使用的任何代码：scriptlet 可以调用其他代码文件中定义的函数、引用全局变量或使用任何 Apps Script API。您甚至可以在脚本中定义函数和变量，但请注意，代码文件或其他模板中定义的函数无法调用这些函数和变量。
如果将下面的示例粘贴到脚本编辑器中，<?= ... ?> 标记（打印脚本小文件）的内容将以斜体显示。该斜体代码在页面提供给用户之前在服务器上运行。由于 scriptlet 代码在网页投放之前执行，因此每个网页只能运行一次；与您通过google.script.run调用的客户端 JavaScript 或 Apps Script 函数不同，scriptlet 在网页加载后无法再次执行。
Code.gs
function doGet() {
return HtmlService
.createTemplateFromFile('Index')
.evaluate();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
Hello, World! The time is <?= new Date() ?>.
</body>
</html>
请注意，模板化 HTML 的 doGet() 函数与创建和提供基本 HTML 的示例不同。此处显示的函数从 HTML 文件生成 HtmlTemplate 对象，然后调用其 evaluate() 方法来执行脚本，并将模板转换为 HtmlOutput 对象，脚本可将其传送给用户。
标准 Scriptlet
使用 <? ... ?> 语法的标准 scriptlet 能够执行代码，而无需将内容显式输出到网页。不过，如本例所示，scriptlet 内代码的结果仍可能会影响该 consolelet 之外的 HTML 内容：
Code.gs
function doGet() {
return HtmlService
.createTemplateFromFile('Index')
.evaluate();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<? if (true) { ?>
<p>This will always be served!</p>
<? } else { ?>
<p>This will never be served.</p>
<? } ?>
</body>
</html>
打印 Scriptlet
输出脚本使用 <?= ... ?> 语法将其代码结果输出到页面中。
内容相关转义是指 Apps 脚本会跟踪页面上输出的上下文（HTML 属性内、客户端 script 标记内或任何其他地方），并自动添加转义字符，以防范跨站脚本攻击 (XSS) 攻击。
在此示例中，第一个输出脚本脚本直接输出一个字符串；后跟一个标准脚本脚本（用于设置数组和循环），以及另一个输出脚本脚本脚本（用于输出数组内容）。
Code.gs
function doGet() {
return HtmlService
.createTemplateFromFile('Index')
.evaluate();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<?= 'My favorite Google products:' ?>
<? var data = ['Gmail', 'Docs', 'Android'];
for (var i = 0; i < data.length; i++) { ?>
<b><?= data[i] ?></b>
<? } ?>
</body>
</html>
请注意，输出 scriptlet 仅输出其第一个语句的值；其余所有语句的行为都与标准 scriptlet 中包含一样。例如，scriptlet <?= 'Hello, world!'; 'abc' ?> 仅输出“Hello, world!”
强制打印 Scriptlet
使用语法 <?!= ... ?> 的强制打印 scriptlet 与输出 scriptlet 类似，不同之处在于它们可以避免上下文转义。
如果您的脚本允许不受信任的用户输入，请务必进行内容相关转义。相比之下，如果您的脚本输出有意包含要完全按照指定方式插入的 HTML 或 HTML 或脚本，则需要强制打印。
一般来说，除非您知道自己需要不加更改 HTML 或 JavaScript 的输出，否则请使用输出脚本，而不是强制打印 scriptlet。
Scriptlet 中的 Apps 脚本代码
Scriptlet 并不仅限于运行常规 JavaScript；您还可以使用以下三种方法中的任意一种来为模板授予对 Apps 脚本数据的访问权限。
不过请注意，由于模板代码是在网页提供给用户之前执行的，因此这些技术只能将初始内容馈送到网页。如需从页面中以交互方式访问 Apps 脚本数据，请改用 google.script.run API。
通过模板调用 Apps 脚本函数
Scriptlet 可以调用 Apps 脚本代码文件或库中定义的任何函数。此示例展示了一种将数据从电子表格拉取到模板中，然后根据该数据构建 HTML 表格的方法。
Code.gs
function doGet() {
return HtmlService
.createTemplateFromFile('Index')
.evaluate();
}
function getData() {
return SpreadsheetApp
.openById('1234567890abcdefghijklmnopqrstuvwxyz')
.getActiveSheet()
.getDataRange()
.getValues();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<? var data = getData(); ?>
<table>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>
<? for (var j = 0; j < data[i].length; j++) { ?>
<td><?= data[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
</table>
</body>
</html>
直接调用 Apps Script API
您也可以直接在脚本中使用 Apps 脚本代码。此示例通过在模板本身中加载数据（而不是通过单独的函数）实现与上例相同的结果。
Code.gs
function doGet() {
return HtmlService
.createTemplateFromFile('Index')
.evaluate();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<? var data = SpreadsheetApp
.openById('1234567890abcdefghijklmnopqrstuvwxyz')
.getActiveSheet()
.getDataRange()
.getValues(); ?>
<table>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>
<? for (var j = 0; j < data[i].length; j++) { ?>
<td><?= data[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
</table>
</body>
</html>
将变量推送到模板
最后，您可以将变量分配为 HtmlTemplate 对象的属性，从而将变量推送到模板中。同样，此示例实现与前面的示例相同的结果。
Code.gs
function doGet() {
var t = HtmlService.createTemplateFromFile('Index');
t.data = SpreadsheetApp
.openById('1234567890abcdefghijklmnopqrstuvwxyz')
.getActiveSheet()
.getDataRange()
.getValues();
return t.evaluate();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<table>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>
<? for (var j = 0; j < data[i].length; j++) { ?>
<td><?= data[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
</table>
</body>
</html>
调试模板
调试模板可能比较困难，因为您编写的代码不是直接执行的代码，而是服务器将您的模板转换为代码，然后执行生成的代码。
如果模板如何解读您的脚本，则使用 HtmlTemplate 类中的两个调试方法可以更好地理解发生的情况。
getCode()
getCode() 会返回一个字符串，其中包含服务器根据模板创建的代码。如果您记录代码，然后将其粘贴到脚本编辑器中，则可像普通 Apps 脚本代码一样运行和调试代码。
下面是一个简单模板，再次显示 Google 产品列表，后跟 getCode() 的结果：
Code.gs
function myFunction() {
Logger.log(HtmlService
.createTemplateFromFile('Index')
.getCode());
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<?= 'My favorite Google products:' ?>
<? var data = ['Gmail', 'Docs', 'Android'];
for (var i = 0; i < data.length; i++) { ?>
<b><?= data[i] ?></b>
<? } ?>
</body>
</html>
日志（已评估）
(function() { var output = HtmlService.initTemplate(); output._ = '<!DOCTYPE html>\n';
output._ = '<html>\n' +
' <head>\n' +
' <base target=\"_top\">\n' +
' </head>\n' +
' <body>\n' +
' '; output._$ = 'My favorite Google products:' ;
output._ = ' '; var data = ['Gmail', 'Docs', 'Android'];
for (var i = 0; i < data.length; i++) { ;
output._ = ' <b>'; output._$ = data[i] ; output._ = '</b>\n';
output._ = ' '; } ;
output._ = ' </body>\n';
output._ = '</html>';
/* End of user code */
return output.$out.append('');
})();
getCodeWithComments()
getCodeWithComments() 与 getCode() 类似，但会将求值的代码作为注释与原始模板并排显示。
浏览已评估的代码
在接受评估的代码示例中，您首先会注意到的是 HtmlService.initTemplate() 方法创建的隐式 output 对象。此方法未被记录，因为只有模板本身需要使用它。output 是一个特殊的 HtmlOutput 对象，具有两个异常命名的属性：_ 和 _$，它们是调用 append() 和 appendUntrusted() 的简写形式。
output 还有一个特殊属性 $out，该属性引用不具有这些特殊属性的常规 HtmlOutput 对象。该模板会在代码末尾返回该常规对象。
现在您已经了解了此语法，其余代码应该非常简单易懂。scriptlet 之外的 HTML 内容（例如 b 标记）使用 output._ =（不进行上下文转义）附加，而 scriptlet 将作为 JavaScript 附加（有或没有上下文转义，具体取决于脚本的类型）。
请注意，评估的代码会保留模板中的行号。如果您在运行已评估的代码时收到错误，该行将与模板中的等效内容相对应。
注释的层次结构
由于已评估的代码会保留行号，因此 scriptlet 内的注释可以注释掉其他 scriptlet 甚至 HTML 代码。以下示例展示了注释的一些令人惊讶的效果：
<? var x; // a comment ?> This sentence won't print because a comment begins inside a scriptlet on the same line.
<? var y; // ?> <?= "This sentence won't print because a comment begins inside a scriptlet on the same line.";
output.append("This sentence will print because it's on the next line, even though it's in the same scriptlet.”) ?>
<? doSomething(); /* ?>
This entire block is commented out,
even if you add a */ in the HTML
or in a <script> */ </script> tag,
<? until you end the comment inside a scriptlet. */ ?>