字符串函数在原型设计中的3个实战场景：无需代码教程！

引言

在原型设计中，函数表达式是一项非常实用且常见的高级交互功能，它能让原型实现更智能的逻辑判断与数据处理，让交互效果更贴近于真实上线的产品。常见的函数类型包括字符串函数、数字函数、日期函数等等。本文将结合3个典型的字符串函数应用场景，带大家了解这些函数在原型设计中的高级玩法与实操教程。

注：本文案例基于墨刀原型设计工具的函数功能演示，案例是“一个很努力的小卡拉米”的原型案例合集。若使用的是其他原型设计工具例如Axure，也能找到类似的函数设置方式，逻辑同样适用。

一、文本长度判断

使用场景举例：手机号11位数判断

1. 交互目标

当用户在输入框中填写手机号时，需要判断输入的字符长度是否为11位。若为11位则验证通过提示“手机号验证成功”，否则提示“请填写正确手机号”。

2. 具体教程

首先为手机号输入框绑定变量，在右侧属性面板中，鼠标移至“文本”处点击“+”号，创建一个字符串变量命名为“输入手机号”，初始值默认为空。

接着为验证按钮添加单击触发的交互事件：

• 触发方式：单击
• 行为：条件判断
• 条件：如果“输入手机号”.length==11，则打开浮层提示“手机号验证成功”
• 条件分支：否则则打开浮层提示“请填写正确手机号”

Tips：在本文举例的原型工具中，使用字符串函数时，可以滑动下方函数列表选择适合的字符串函数（如这里使用的字符串.length），无需编写代码即可完成复杂逻辑判断。

相似的场景还有密码位数判断，例如密码要求大于8位数，同样可以利用字符串函数判断输入文本长度，来给出不同的反馈提示。

二、文本连接

使用场景举例：姓与名自动合成

1. 交互目标

文本连接常应用在信息表单中，用户分别输入姓和名后，点击“下一步”按钮自动合成完整姓名并显示。（下方案例教程仅展示具体实操细节）

2. 具体教程

首先创建绑定3个变量：

• 变量“文本1”：为文本1输入框绑定并创建字符串变量，初始值为空；
• 变量“文本2”：为文本2输入框绑定并创建字符串变量，初始值为空；
• 变量“新文本”：为新文本输入框绑定并创建字符串变量，初始值为空。

接着为验证按钮设置单击触发的交互事件：

• 触发方式：单击
• 行为：设置变量值
• 目标变量：“新文本”
• 值：将“新文本”设为“文本1”.concat(“文本2”)

这里使用了字符串.concat()函数，用于拼接两个或多个字符串并返回一个新字符串，非常适合姓名、地址等信息自动组合场景。

三、字母大小写转换

使用场景举例：验证码输入格式统一

1. 交互目标

在验证码输入或表单填写中，用户输入的字母可能有大小写不一致的情况。此时可通过字符串函数实现一键转换为全大写或全小写格式。

2. 具体教程

首先为文本输入框创建并绑定字符串变量，命名为“大写”，初始值为空。

接着为验证按钮设置交互：

• 触发方式：单击
• 行为：设置变量值
• 值：将“大写”设为“大写”.toUpperCase()

这里使用的字符串函数为字符串.toUpperCase()，将字符串转换为大写形式。

同样的方式，如果需要将字母内容全部转换为小写形式，那么在交互行为中使用的函数公式为：字符串.toLowerCase()，其余设置一致。

结语

以上三个字符串函数应用——长度判断、文本拼接、大小写转换，是原型设计中比较常见的字符串函数场景。除了这些，还有诸如去除空白字符（trim()）、检查字符串包含（includes()）等函数，使用方法都比较简单，尤其是在本文举例的工具使用中，即使没有编程基础，也能轻松实现更高级的交互效果。熟练掌握函数表达式可以让你的原型更接近真实产品的交互体验。