Flask应用HTML脚本代码报错及多类型变量传递语法咨询

一、解决当前报错问题 #

你的报错根源是模板渲染{{length}}时生成的代码不符合JavaScript语法规范（比如length为字符串时会裸写为无引号的标识符，触发未定义错误）。只需给变量加上| tojson过滤器即可修复：

const amount = {{ length | tojson }};
console.log(amount);

tojson会自动将Python变量转换为符合JS语法的格式，处理引号、转义等细节，彻底避免语法报错。

二、不同类型变量的传递语法 #

1. 数字类型（整数、浮点数） #

Python后端：

return render_template("Home.html", num=123, float_num=45.67)

JS中使用：

const num = {{ num | tojson }};
const floatNum = {{ float_num | tojson }};

注：数字类型不加tojson也能渲染，但加上更安全——比如Python的None会被转为JS的null，避免逻辑错误

2. 布尔类型 #

Python后端：

return render_template("Home.html", is_active=True, is_disabled=False)

JS中使用：

const isActive = {{ is_active | tojson }};
const isDisabled = {{ is_disabled | tojson }};

tojson会自动把Python大写的True/False转为JS小写的true/false，匹配JS语法

3. 字符串类型 #

Python后端：

return render_template("Home.html", username="Armaan Khaitan", desc='Hello "World"')

JS中使用：

const username = {{ username | tojson }};
const desc = {{ desc | tojson }};

tojson会自动给字符串加双引号，并转义内部的引号、换行等特殊字符，避免语法冲突。

4. 列表/数组类型 #

你已在使用该方式，这里明确标准写法：
Python后端：

images = ["img1.jpg", "img2.png", "img3.gif"]
return render_template("Home.html", images=images)

JS中使用：

const images = {{ images | tojson }};
console.log(images[0]); // 输出"img1.jpg"

5. 字典/对象类型 #

和列表逻辑一致，tojson会直接转为JS对象：
Python后端：

user_info = {"name": "Armaan", "age": 25, "is_admin": True}
return render_template("Home.html", user_info=user_info)

JS中使用：

const userInfo = {{ user_info | tojson }};
console.log(userInfo.name); // 输出"Armaan"

三、通用原则 #

所有从Flask传递到JS的变量，都推荐用| tojson过滤器。它会自动完成Python到JS的类型转换、语法转义，不用手动拼接字符串或处理特殊字符，从根源避免语法错误。

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