扣子网页应用中组件绑定表达式 支持 简化版 JavaScript 语法

2026-04-11 01:00:45 18 分享链接 开发笔记 扣子工作流

扣子网页应用中 {{ }} 组件绑定表达式，支持 简化版 JavaScript 表达式语法，专门用来处理文本、变量、简单逻辑，不支持复杂代码。

下面是全部支持的语法，按常用度排序：

一、核心支持的语法（全部能用）

1. 变量 / 对象 / 数组引用（基础）

直接取工作流返回的数据：

// 对象嵌套
shotCreate.data.output1

// 数组取值
list.data[0].name

2. 字符串处理方法（你最常用！）

适用于文本、换行、替换、截取、清理空格：

// 1. 替换字符（你正在用的！）
text.replace(/\\n/g, '\n')        // 把转义的\n换成真实换行
text.replace('aaa', 'bbb')        // 普通替换
text.replace(/ /g, '')            // 全局替换空格

// 2. 清除首尾空格
text.trim()

// 3. 截取字符串
text.slice(0, 50)    // 取前50个字符
text.substring(0, 20)

// 4. 大小写转换
text.toUpperCase()
text.toLowerCase()

// 5. 分割字符串 → 数组
text.split('\n')     // 按换行切成数组

3. 数组处理方法

如果你的数据是列表/数组：

// 数组转字符串（最常用：数组 → 多行文本）
array.join('\n')        // 数组每一项用换行连接
array.join('、')        // 用顿号连接

// 数组截取
array.slice(0, 3)      // 取前3项

4. 三元表达式（唯一支持的条件判断）

不能写 if，但可以用三元运算符：

// 格式：条件 ? 真值 : 假值
score >= 60 ? '合格' : '不合格'
text ? text : '暂无内容'

5. 算术 / 比较 / 逻辑运算符

// 算术
num + 1
num * 2

// 比较
a > b
a == b
a != b

// 逻辑
a && b
a || b

6. 空值安全语法（防报错）

// 可选链：数据不存在也不崩溃
shotCreate?.data?.output1

// 空值合并：没有数据时显示默认值
text ?? '暂无内容'

7. 括号分组

(num1 + num2) * 2

二、绝对不支持的语法（不要写）

这些不能用，写了会报错：

• if / else / for / while 语句
• 定义函数 function() {}
• 变量声明 let / var / const
• 多行代码
• 复杂逻辑
• DOM 操作

三、你场景下最实用的示例（直接复制）

1. 解决换行（你正在用的 ✅）

{{ shotCreate.data.output1.replace(/\\n/g, '\n') }}

2. 数组 → 多行文本

{{ list.data.join('\n') }}

3. 文本过长自动截取

{{ text.slice(0, 100) + '...' }}

4. 空值兜底

{{ text ?? '暂无内容' }}

5. 清理多余空格 + 换行

{{ text.trim().replace(/\\n/g, '\n') }}

6. 条件显示

{{ score >= 60 ? '合格' : '不合格' }}

四、一句话总结

{{ }} 里支持：
变量引用 + 字符串/数组方法 + 三元表达式 + 运算符 + 空值安全
不支持：
if/for/函数/多行代码

最终结论

你现在用的

{{ shotCreate.data.output1.replace(/\\n/g, '\n') }}

是完全合法、官方支持的标准写法 ✅

如果你需要，我可以直接帮你写任意文本格式化、换行、截取、替换、数组展示的表达式，直接复制就能用！

扣子(Coze)官方文档汇总：组件绑定表达式与换行符处理

一、核心官方文档链接（直接访问）

二、官方文档中的关键说明（关于表达式语法）

1. {{}}表达式基础规则

• 核心语法：双大括号包裹变量或表达式，如{{username}}或{{shotCreate.data.output1}}
• 支持的数据源：工作流返回数据、组件content、URL参数、局部上下文
• 变量作用域：必须在当前组件或页面作用域内可访问，否则显示错误或空白

2. JSExpression支持的语法范围（官方明确）

3. 官方明确不支持的语法

• if/else、for/while等完整语句
• 函数定义function(){}
• 变量声明let/var/const
• 多行代码块

三、换行符处理的官方解决方案（文档原文）

1. 结束节点返回模式选择（关键）

• 返回文本模式（推荐处理换行）：直接按Enter键换行，编辑器自动生成真实\n，不会被JSON转义
• 返回变量模式：以JSON格式输出，\n会被转义为\\n，需前端额外处理

2. 组件渲染模式设置（必须）

• Text组件：在"常用设置"中选择"Markdown渲染"或"HTML渲染"，开启"自动换行"
• Markdown组件：天然支持\n换行，无需额外处理
• 纯文本模式：不解析\n，直接显示字符

3. 官方推荐的换行符处理流程

1. 工作流结束节点选择"返回文本"，直接按Enter换行
2. 网页应用组件选择"Markdown渲染"模式
3. 绑定表达式：{{shotCreate.data}}（无需手动处理\n）

四、解决\n显示问题的官方权威方法

1. 方案一：返回文本+Markdown渲染（零代码，官方推荐）

   工作流结束节点：返回文本 → 直接按Enter换行
   组件设置：Text组件 → 渲染模式：Markdown → 开启自动换行

2. 方案二：返回变量+前端表达式处理（官方支持）

   {{shotCreate.data.output1.replace(/\\n/g, '\n')}}

   官方说明：此表达式属于JSExpression支持的字符串方法调用，完全合法

3. 方案三：工作流内代码节点处理（官方推荐复杂场景）

   // 代码节点中处理换行符
   return {
     output1: input_text.replace(/\\n/g, '\n')
   };

五、官方文档中的常见问题提示

1. JSON转义问题：返回变量模式下，\n会被转义为\\n，前端处理时需匹配\\n而非\n
2. 渲染模式决定换行效果：纯文本模式下\n永远不会换行，必须切换到Markdown或HTML渲染
3. 分镜脚本/旁白区域：属于纯文本输入框，只能使用真实换行符（Enter），不支持\n字符

需要我把这些官方文档中与换行符处理最相关的段落直接复制出来，做成一份可快速查阅的“官方解决方案速查表”吗？