Google Web App中Script标签调用模板对象报错求助

错误原因分析 #

你遇到的Uncaught SyntaxError: Unexpected token '<'错误，核心问题是模板变量渲染后不符合JavaScript语法规范：

• 当你在JS中写var desiredValue = <?!= usercode ?>;，如果usercode是字符串类型（比如"EMP001"），模板渲染后会变成var desiredValue = EMP001;，此时EMP001会被JS当作未定义的变量，而非字符串；如果usercode包含特殊字符，还会直接破坏JS语法结构。
• 即使尝试JSON.stringify，若未正确处理渲染后的引号转义，同样会触发语法错误。

规范实现方法 #

方法1：直接渲染JSON格式变量（推荐） #

在HTML模板的<script>中，用JSON.stringify处理模板变量后直接输出，JS可直接使用或解析：

修改后的JS代码示例：

<script>
// 单个变量
var usercode = <?= JSON.stringify(usercode) ?>;
console.log(usercode);

// 传递完整用户对象（如需）
var userData = <?= JSON.stringify({
  usercode: usercode,
  username: username,
  division: division,
  access: access
}) ?>;
console.log(userData.access[0]);
</script>

原理：

JSON.stringify会自动将变量转换为符合JS语法的格式（添加双引号、转义特殊字符），渲染后生成合法的JS代码，比如：

var usercode = "EMP001";

方法2：注入全局变量供其他JS文件使用 #

在HTML的<head>或<body>中单独添加模板渲染的<script>块，将变量挂载到全局作用域，后续引入的JS文件可直接访问：

<script>
// 全局变量，Menu-JS等文件可直接调用
window.appUserData = {
  usercode: <?= JSON.stringify(usercode) ?>,
  username: <?= JSON.stringify(username) ?>,
  access: <?= JSON.stringify(access) ?>
};
</script>
<?!= include('Menu-JS'); ?>

关于你当前使用的<param>标签方式 #

这种方式可行，但不属于前端规范实践：

• 优点：实现简单，适合传递少量基础变量
• 缺点：
  • <param>标签原本为<object>元素设计，用于传递插件参数，语义上不符合页面数据传递场景
  • 需通过DOM查询获取变量，代码冗余，且无法直接传递复杂对象（如数组、嵌套结构）

关键注意事项 #

• 所有传递给JS的模板变量，必须用JSON.stringify处理，尤其是字符串、数组、对象类型，避免语法错误
• 不要直接用<?!= variable ?>输出非JSON格式的值，除非能确保值本身是合法JS字面量（如数字、布尔值）

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