外观

此页内容

03-数学、函数和表达式

4213字约14分钟

2024-06-04

数学、函数和表达式-Axure教程

表达式允许您通过原型中的交互动态生成文本和数值。您可以使用表达式来执行诸如计算购物车的购买总额、动态构建 UI 消息以及显示当前日期等动作。

您可以在旁边带有fx图标的任何字段中使用表达式。直接在字段中键入您的表达式或单击图标以打开“编辑值”对话框。

从那里，您可以单击插入变量或函数以查看可用于表达式的变量和函数的完整列表。您还可以创建局部变量来访问表达式中的特定元件属性。

表达式

Axure RP 将任何用双方括号“[[ ]]”括起来的文本视为表达式，并且表达式本身将被其自己在 Web 浏览器中的最终输出值替换。括号外的文本被视为静态文本，不会在 Web 浏览器中更改。

例如，如果您将元件上的文本设置为**“结算金额为 ￥[[ 5.50 + 2.99 ]]”，则元件的文本在浏览器呈现时会显示“结算金额为 ￥8.49”**。

数字和数学

基本运算符

您可以在表达式中执行以下基本数学运算：

操作符解释示例结果
+加法[[ 5 + 3 ]]8
-减法[[ 5 - 3 ]]2
*乘法[[ 5 * 3 ]]15
/除法[[ 5 / 2 ]]2.5
%求模，取余数[[ 5 % 2 ]]1

高级数字和数学函数

要执行更高级的数学运算，请使用“插入变量”或“函数”菜单中“数字”和“数学”下列出的函数。

您可以将这些函数用于：

  • 数字：[[ 7.546.toFixed(2) ]]

  • 包含数值的变量：[[ TaxRateVar.toFixed(2) ]]

  • 其他操作和函数返回的数值：[[ (2.55*7.3).toFixed(2) ]]

函数解释示例结果
x .toExponential(小数点)返回以指数表示法表示 x 的字符串。您可以在括号中指定小数位数。[[ 12345.toExponential() ]]1.2345e+4
[[ 12345.toExponential(2) ]]1.23e+4
x .toFixed(小数点)将 x 舍入到括号中指定的小数位数。[[ 12.345.toFixed(2) ]]12.35
x .toPrecision（长度）返回一个字符串，表示具有指定有效位数的 x。可能以指数表示法返回大数。[[ 12.34.toPrecision(3) ]]12.3
[[ 12.34.toPrecision(5) ]]12.340
[[ 1234.toPrecision(2) ]]1.2e+3
Math.abs( x )返回 x 的绝对值。[[ Math.abs(-1) ]]1
Math.acos( x )以弧度为单位返回 x 的反余弦值。[[ Math.acos(-1) ]]3.141592653589793
Math.asin( x )以弧度为单位返回 x 的反正弦值。[[ Math.asin(1) ]]1.5707963267948966
Math.atan( x )以弧度为单位返回 x 的反正切值。[[ Math.atan(1) ]]0.7853981633974483
Math.atan2( y , x )返回平面中正 x 轴与从 (0,0) 到点 (x,y) 的射线之间的角度（以弧度为单位）。[[ Math.atan2(90, 15) ]]1.4056476493802699
Math.ceil( x )将 x 向上舍入到最接近的整数。[[ Math.ceil(12.3) ]]13
Math.cos( x )返回 x 的余弦值，以弧度表示。[[ Math.cos(1) ]]0.5403023058681398
Math.exp( x )返回 e 的 x 次幂，其中 e 是欧拉数。[[ Math.exp(1) ]]2.718281828459045
Math.floor( x )将 x 向下舍入到最接近的整数。[[ Math.floor(12.7) ]]12
Math.log( x )返回 x 的自然对数。[[ Math.log(10) ]]2.302585092994046
Math.max( x , y , ...)返回括号中最大的数字。[[ Math.max(1, 5, 3) ]]5
Math.min( x , y , ...)返回括号中最小的数字。[[ Math.min(1, 5, 3) ]]1
Math.pow( x , y )返回 x 的 y 次幂。[[ Math.pow(5, 3) ]]125
Math.random()返回 0（含）和 1（不含）之间的随机数。[[ Math.random() ]]0.9255151869426522
Math.sin( x )返回 x 的正弦值，以弧度表示。[[ Math.sin(1) ]]0.8414709848078965
Math.sqrt( x )返回 x 的平方根。[[ Math.sqrt(25) ]]5
Math.tan( x )返回 x 的正切值，以弧度表示。[[ Math.tan(1) ]]1.5574077246549023

字符串（文本）

要处理文本字符串，请使用“插入变量”或“函数”菜单中“字符串”下列出的函数。

您可以将这些函数用于：

  • 双引号或单引号内的文本字符串：[[ "Hello, world!".toUpperCase() ]]

  • 包含字符串值的变量：[[ GreetingVar.toUpperCase() ]]

  • 其他操作和函数返回的字符串值：[[ "Hello, world!".substr(0,5).toUpperCase() ]]

函数解释示例结果
字符串.length返回字符串的字符长度，包括空格。[[ "Hello, world!".length ]]13
字符串.charAt(index)返回字符串中指定索引处的字符。[[ "Hello, world!".charAt(7) ]]w
字符串.charCodeAt(index)返回字符串中指定索引处字符的 UTF-16 代码单元。[[ "Hello, world!".charCodeAt(7) ]]119
字符串.concat("字符串", ...)将括号中的字符串添加（concat生成）到调用函数的字符串中。[[ "Hello".concat(", world!") ]]Hello, world!
+[[ "Hello" + ", world!" ]]Hello, world!
字符串.indexOf("searchValue")返回调用函数的字符串中搜索值的第一个实例的起始索引。如果未找到搜索值，则返回 -1。[[ "Hello, world!".indexOf("lo") ]]3
字符串.lastIndexOf("searchValue")返回调用函数的字符串中搜索值的最后一个实例的起始索引。如果未找到搜索值，则返回 -1。[[ "Hello, world!".lastIndexOf("o") ]]8
字符串.replace("searchValue", "newValue")用新值替换搜索值的所有实例。[[ "Hello, world!".replace("Hello", "Howdy") ]]Howdy, world!
字符串.slice(起始索引, 结束索引)返回字符串的片段，从第一个索引处的字符开始，到第二个索引之前的字符结束。[[ "Hello, world!".slice(3, 10) ]]lo, wor
省略第二个索引以代替在字符串的末尾结束。[[ "Hello, world!".slice(3) ]]lo, world!
返提供负索引以从字符串的末尾向后计数。[[ "Hello, world!".slice(-6, 12) ]]world
字符串.substr（起始索引，长度）返回字符串的片段，从起始索引处的字符开始，一直持续到达到指定的长度。[[ "Hello, world!".substr(3, 7) ]]lo, wor
省略长度以改为在字符串末尾结束。[[ "Hello, world!".substr(3) ]]lo, world!
提供负索引以从字符串的末尾向后计数。[[ "Hello, world!".substr(-6, 5) ]]world
字符串.substring(起始索引, 结束索引)返回字符串的片段，从第一个索引处的字符开始，到第二个索引之前的字符结束。[[ "Hello, world!".substring(3, 10) ]]lo, wor
省略第二个索引以代替在字符串的末尾结束。[[ "Hello, world!".substring(3) ]]lo, world!
字符串.toLowerCase()将字符串转换为所有小写字符。[[ "Hello, world!".toLowerCase() ]]hello, world!
字符串.toUpperCase()将字符串转换为所有大写字符。[[ "Hello, world!".toUpperCase() ]]HELLO, WORLD!
字符串.trim()从字符串的开头和结尾删除所有空格字符。[[ " Hello, world! ".trim() ]]Hello, world

元件属性

您可以使用“插入变量”或“函数”菜单中的元件下列出的选项访问元件的属性，例如它们的位置和尺寸。

为了使用这些选项，您需要将它们附加到带有“点符号”的元件对象：Object.property。您可以使用三个元件对象：

  • This是指您正在为其配置当前动作的事件的元件，例如您可能正在使用其点击事件的按钮。
    [[ This.width ]]

  • Target是指作为您当前正在配置的动作的目标的元件，例如使用“显示/隐藏”动作隐藏的元件。
    [[ Target.width ]]

  • LVAR1指的是您存储在局部变量中的元件。（默认第一个局部变量名称是“LVAR1”，您可以任意更改。）
    [[ LVAR1.width ]]

函数解释示例结果
元件.x返回元件左上角的 x 值。[[ LVAR1.x ]]100
元件.y返回元件左上角的 y 值。[[ LVAR1.y ]]100
元件.width以像素为单位返回元件的宽度。[[ LVAR1.width ]]300
元件.height以像素为单位返回元件的高度。[[ LVAR1.height ]]170
元件.scrollX返回可滚动动态面板已水平滚动的像素数。[[ LVAR1.scrollX ]]50
元件.scrollY返回可滚动动态面板已垂直滚动的像素数。[[ LVAR1.scrollY ]]50
元件.text返回元件的文本（如果有）。[[ LVAR1.text ]]first.last@domain.com
元件.name返回元件的名称（如果您已经命名）。[[ LVAR1.name ]]Email Field
元件.top返回元件顶部边缘的 y 值。[[ LVAR1.top ]]100
元件.left返回元件左边缘的 x 值。[[ LVAR1.left ]]100
元件.right返回元件右边缘的 x 值。[[ LVAR1.right ]]400
元件.bottom返回元件底部边缘的 y 值。[[ LVAR1.bottom ]]270
元件.opacity以 0 到 100 之间的数字形式返回元件的不透明度。[[ LVAR1.opacity ]]85
元件.rotation以 0 到 359 之间的数字形式返回元件的旋转度。[[ LVAR1.rotation ]]90

页面、窗口和光标

函数解释示例结果
PageName返回当前页面的名称，如“页面”窗格中所示。[[ PageName ]]登录页
Window.width以像素为单位返回浏览器窗口的宽度。[[ Window.width ]]1920
Window.height以像素为单位返回浏览器窗口的高度。[[ Window.height ]]948
Window.scrollX返回浏览器窗口已水平滚动的像素数。[[ Window.scrollX ]]100
Window.scrollY返回浏览器窗口已垂直滚动的像素数。[[ Window.scrollY ]]100
Cursor.x返回光标在页面上的位置的 x 值。[[ Cursor.x ]]100
Cursor.y返回光标在页面上的位置的 y 值。[[ Cursor.y ]]100
DragX当您拖动动态面板元件时，返回沿 X 轴的光标前一个位置和当前位置之间的像素差。向右拖动时值为正，向左时值为负。[[ DragX ]]3
DragY当您拖动动态面板元件时，返回沿 Y 轴的光标前一个位置和当前位置之间的像素差。向下拖动时值为正，向上时值为负。[[ DragY ]]-5
TotalDragX当您拖动动态面板元件时，返回光标的起始位置与其当前位置之间沿 X 轴的像素差。向右拖动时值为正，向左时值为负。[[ TotalDragX ]]-30
TotalDragY当您拖动动态面板元件时，返回光标的起始位置与其当前位置之间沿 Y 轴的像素差。向下拖动时值为正，向上时值为负。[[ TotalDragY ]]50
DragTime返回动态面板从拖动开始到结束的总时间（以毫秒为单位）。[[ DragTime ]]1525

虽然DragTime跟踪整个拖动的持续时间，但只有在拖动过程中光标移动时才会更新返回值。

日期和时间

使用“插入变量”或“函数”菜单中**“日期”**下列出的函数来生成和处理日期和时间信息。

您可以将这些函数用于以下日期对象：

  • Now

  • GenDate

  • Date.UTC()

  • Date.parse()

函数解释示例结果
Now表示当前日期和时间的日期对象。单独使用时，返回当前日期和时间，并带有 Web 浏览器的时区。[[ Now ]]Wed Nov 14 2021 16:20:24 GMT+0800 (中国标准时间)
GenDate一个日期对象，表示上次生成原型 HTML 的日期和时间。[[ GenDate ]]Wed Nov 14 2018 16:20:24 GMT+0800 (中国标准时间)
Now.getDate()返回一个数字，表示给定日期对象属于该月份中的第几天（浏览器当前时区）。[[ Now.getDate() ]]16
Now.getUTCDate()返回一个数字，表示给定日期对象属于该月份中的第几天（世界时间）。[[ Now.getUTCDate() ]]15
Now.getDay()返回一个数字，表示给定日期对象是星期几（浏览器当前时区）。周日是0。[[ Now.getDay() ]]4
Now.getUTCDay()返回一个数字，表示给定日期对象是星期几（世界时间）。周日是0。[[ Now.getUTCDay() ]]3
Now.getDayOfWeek()返回给定日期对象的星期几的名称。[[ Now.getDayOfWeek() ]]Wednesday
Now.getFullYear()以四位数格式返回给定日期对象的年份（浏览器当前时区）。[[ Now.getDay() ]]2021
Now.getUTCFullYear()以四位数格式返回给定日期对象的年份（世界时间）。[[ Now.getUTCFullYear() ]]2021
Now.getHours()以0到23之间的数字形式返回给定日期对象时间的小时部分（浏览器当前时区）。[[ Now.getHours() ]]16
Now.getUTCHours()以0到23之间的数字形式返回给定日期对象时间的小时部分（世界时间）。[[ Now.getUTCHours() ]]0
Now.getMilliseconds()返回给定日期对象时间的毫秒部分（浏览器当前时区）。[[ Now.getMilliseconds() ]]838
Now.getUTCMilliseconds()返回给定日期对象时间的毫秒部分（世界时间）。[[ Now.getUTCMilliseconds() ]]838
Now.getMinutes()返回给定日期对象时间的分钟部分（浏览器当前时区）。[[ Now.getMinutes() ]]20
Now.getUTCMinutes()返回给定日期对象时间的分钟部分（世界时间）。[[ Now.getUTCMinutes() ]]20
Now.getMonth()以 1 到 12 之间的数字形式返回给定日期对象的月份（浏览器当前时区）。[[ Now.getMonth() ]]11
Now.getUTCMonth()以 0 到 11 之间的数字形式返回给定日期对象的月份（世界时间）。[[ Now.getUTCMonth() ]]10
Now.getMonthName()返回给定日期对象的月份名称。[[ Now.getMonthName() ]]November
Now.getSeconds()返回给定日期对象时间的秒部分（浏览器当前时区）。[[ Now.getSeconds() ]]24
Now.getUTCSeconds()返回给定日期对象时间的秒部分（世界时间）。[[ Now.getUTCSeconds() ]]24
Now.getTime()返回1970年1月1日 00:00:00 UTC和给定日期对象之间经过的毫秒数。[[ Now.getTime() ]]1542235968871
Now.getTimezoneOffset()返回Web浏览器当前时间与世界时间 (UTC) 的时区差异（以分钟为单位）。[[ Now.getTimezoneOffset() ]]480
Date.parse(dateString)返回1970年1月1日 00:00:00 UTC和给定日期之间经过的毫秒数。[[ Date.parse(Now) ]]1542236704000
[[ Date.parse("2018-11-14") ]]1542153600000
[[ Date.parse("Jun 28, 1969") ]]-16131600000
Date.toDateString()返回日期对象的简化版本，仅包括星期几、月份、日期和年份。[[ Now.toDateString() ]]Wed Nov 14 2018
Now.toISOString()以世界时间 (UTC) 的简化扩展 ISO 格式返回日期对象。[[ Now.toISOString() ]]2021-11-15T00:31:33.666Z
Now.toLocaleDateString()返回浏览器当前语言和区域的日期对象日期部分。您可以通过在括号中包含 BCP 47 语言标记字符串来手动设置区域。[[ Now.toLocaleDateString() ]]2021/7/12
[[ Now.toLocaleDateString("en-GB") ]]12/07/2021
Now.toLocaleTimeString()返回浏览器当前语言和区域的日期对象时间部分。您可以通过在括号中包含 BCP 47 语言标记字符串来手动设置区域。[[ Now.toLocaleDateString() ]]下午4:49:41
[[ Now.toLocaleTimeString("en-GB") ]]16:48:02
Now.toLocaleString()返回浏览器当前语言和区域的日期对象。您可以通过在括号中包含 BCP 47 语言标记字符串来手动设置区域。[[ Now.toLocaleString() ]]2021/7/12下午4:52:53
[[ Now.toLocaleString("en-GB") ]]12/07/2021, 16:53:19
Now.toTimeString()返回日期对象的时间部分，并带有 Web 浏览器的时区。[[ Now.toTimeString() ]]16:54:59 GMT+0800 (中国标准时间)
Now.toUTCString()以世界时间 (UTC) 返回日期对象的缩短版本。[[ Now.toUTCString() ]]Thu, 15 Nov 2018 01:00:06 GMT
Date.UTC(年、月、日、小时、分钟、秒、毫秒)以世界时间 (UTC) 构造一个新的日期对象，并返回该日期与1970年1月1日 00:00:00 UTC之间经过的毫秒数。[[ Date.UTC(1969, 5, 28, 1, 20) ]]-16152000000
Now.addYears(年)将指定的年数添加到日期对象并返回新的日期和时间，并带有 Web 浏览器的时区。[[ Now.addYears(3) ]]Wed Nov 14 2021 16:20:24 GMT+0800 (中国标准时间)
Now.addMonths(月)将指定的月数添加到日期对象并返回新的日期和时间，并带有 Web 浏览器的时区。[[ Now.addMonths(3) ]]Wed Nov 14 2021 16:20:24 GMT+0800 (中国标准时间)
Now.addDays(天)将指定的天数添加到日期对象并返回新的日期和时间，并带有 Web 浏览器的时区。[[ Now.addDays(3) ]]Wed Nov 14 2021 16:20:24 GMT+0800 (中国标准时间)
Now.addHours(小时)将指定的小时数添加到日期对象并返回新的日期和时间，并带有 Web 浏览器的时区。[[ Now.addHours(3) ]]Wed Nov 14 2021 16:20:24 GMT+0800 (中国标准时间)
Now.addMinutes(分钟)将指定的分钟数添加到日期对象并返回新的日期和时间，并带有 Web 浏览器的时区。[[ Now.addMinutes(3) ]]Wed Nov 14 2021 16:20:24 GMT+0800 (中国标准时间)
Now.addSeconds(秒)将指定的秒数添加到日期对象并返回新的日期和时间，并带有 Web 浏览器的时区。[[ Now.addSeconds(3) ]]Wed Nov 14 2021 16:20:24 GMT+0800 (中国标准时间)
Now.addMilliseconds(毫秒)将指定的毫秒数添加到日期对象并返回新的日期和时间，并带有 Web 浏览器的时区。[[ Now.addMilliseconds(3) ]]Wed Nov 14 2021 16:20:24 GMT+0800 (中国标准时间)

布尔值

布尔运算符用于编写计算结果为true或false的比较表达式。比较表达式用于诸如中继器过滤、更新和标记中继器行以及编写复杂的条件逻辑之类的事项。

操作符解释示例结果
==等于[[ 5 + 2 == 7 ]]true
!=不等于[[ 5 + 2 != 8 ]]true
<小于[[ 5 + 2 < 4 + 3 ]]false
<=小于或等于[[ 5 + 2 <= 4 + 3 ]]true
>大于[[ 5 + 2 > 4 + 3 ]]false
>=大于或等于[[ 5 + 2 >= 4 + 2 ]]true
&&与，所有组合表达式为true时为true[[ 5 + 2 == 7 && 4 + 3 > 6 ]]true
[[ 5 + 2 == 7 && 4 + 3 < 8 && 5 < 3 ]]false
||或，至少一个表达式为true时为true[[ 5 > 3 || 4 + 3 == 8 || 8 > 9 ]]true
[[ 5 + 2 == 8 || 4 + 3 > 8 ]]false

—— 作者：Axure工坊，智新信息科技(广州)有限公司旗下的原创软件与互联网原型作品、素材、模板的共享交易平台，提供PC、APP、小程序、WEB等各端及电商、O2O、门户网、大数据等各行业的原型设计资源。

—— 官网：www.axured.cn

—— Axure交流群：681760590

—— 作品中心：原型作品及元件库下载

Copyright © 2019-2024 axured.cn All rights reserved Axured