amis使用数字转换方法的几种示例

1.过滤器注意官方现在不推荐使用过滤器写法了称是历史包袱推荐使用表达式。1.5.0 开始更推荐用函数调用的语法来写如${xxx | html}改用${html(xxx)}。普通用法{ type: page, data: { num: -49.89, percentNum: -0.8899 }, body: [ { type: form, debug: true, body: [ { type: tpl, tpl: ${num|round:2|number} }, { type: divider }, { type: tpl, tpl: ${percentNum|percent:2} } ] } ] }参考文档地址https://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/data-mapping#roundhttps://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/data-mapping#roundhttps://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/data-mapping#percenthttps://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/data-mapping#percent自定义过滤器amis npm 包里面暴露了registerFilter方法通过它可以添加自己的过滤器逻辑。设置自定义过滤器代码示例import { registerFilter } from amis; function eval_func(obj, func) {return Function(use strict;return ( func ))()(obj);} registerFilter(eval_func, eval_func);使用自定义过滤器示例{ type: page, data: { changeNumber: -18971.9897, numberType: NUMBER }, body: { type: form, body: [ { type: static-tpl, id: xxx, tpl: ${{changeNumber: changeNumber, precious: 2, numberType: numberType}|eval_func:function transData(params){console.log(\\\\, params);return params.changeNumber|| params.changeNumber 0 ? (params.changeNumber*(params.numberType \\RATE\\ ? 100 : 1)).toFixed(params.precious) : \\-\\}|number}, name: num2, label: 变化数值-自定义过滤器结果, placeholder: -, classNameExpr: ${changeNumbernull||changeNumber-00?:changeNumber0?text-success:text-danger} } ] } }参考文档地址https://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/data-mapping#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E6%BB%A4%E5%99%A8https://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/data-mapping#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E6%BB%A4%E5%99%A8验证步骤:因为是自定义过滤器需要本地项目代码中验证如果是在react或者其他项目中使用amis可以直接参照上述自定义过滤器的代码示例在自己的项目中测试效果。也可以使用官方代码本地启动验证。如果只是想快捷查看代码效果可以参照下述步骤(1) 从代码仓库下载代码https://gitee.com/baidu/amis(2) 按照说明启动项目在编辑器中找到filters目标文件,将自定义过滤器方法加进去浏览器网址: http://localhost:8888/,切换到任意组件,将[使用自定义过滤器示例]代码粘贴进去:2.表达式{ type: page, data: { num: -49.89, percentNum: -0.8899 }, body: [ { type: form, debug: true, body: [ { type: tpl, tpl: ${ROUND(num,2)|number} }, { type: divider }, { type: tpl, tpl: ${ROUND(percentNum*100,2)%} } ] } ] }参考文档地址https://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/expression#roundhttps://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/expression#round3.使用input-number{ type: page, data: { num: -21149.89, percentNum: -0.8899 }, body: [ { type: form, debug: true, body: [ { type: input-number, name: num, precision: 2, static: true, kilobitSeparator: true }, { type: divider }, { type: input-number, name: percentNum2, precision: 2, static: true, suffix: %, value: ${percentNum*100} } ] } ] }参考文档地址https://aisuda.bce.baidu.com/amis/zh-CN/components/form/input-number#%E5%89%8D%E5%90%8E%E7%BC%80-%E5%8D%83%E5%88%86%E5%88%86%E9%9A%94https://aisuda.bce.baidu.com/amis/zh-CN/components/form/input-number#%E5%89%8D%E5%90%8E%E7%BC%80-%E5%8D%83%E5%88%86%E5%88%86%E9%9A%944.actionType为custom写好全局function利用JavaScript模板显示{ type: page, data: { num: -49.89, percentNum: -0.8899 }, onEvent: { init: { actions: [ { script: window.getMoneyNumber(num,precious2){if(!/\\d\\.?/.test(String(num))){return -};const [start,end]num.toFixed(precious).split(.);let val(num-0).replace(/\\B(?(\\d{3})(?!\\d))/g, ,);if(end){val(start-0).replace(/\\B(?(\\d{3})(?!\\d))/g, ,).end;\n};\n return val;};\n\n window.getPercent(num,precious2){if(!/\\d\\.?/.test(String(num))){return -};const [start,end](num*100).toFixed(precious).split(.);let val(num*100).toFixed(precious);if(end){val(start-0).end};return val%;\n};, actionType: custom } ] } }, body: [ { type: form, debug: true, body: [ { type: tpl, tpl: %- window.getMoneyNumber(data.num) % }, { type: divider }, { type: tpl, tpl: %- window.getPercent(data.percentNum) % } ] } ] }参考文档地址https://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/template#javascript-%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8Ehttps://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/template#javascript-%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8Ehttps://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/event-action#%E8%87%AA%E5%AE%9A%E4%B9%89-jshttps://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/event-action#%E8%87%AA%E5%AE%9A%E4%B9%89-js5.使用new Function将字符串转化为function利用JavaScript模板使用这个functionnew Function的基本使用语法const function_namenew function(arg1,arg2,...,argN,function_body);// 简单示例1const str return Hi ${name}!;const func new Function(name, str);func(Alice) // Hi Alice!// 简单示例2const str return (num, precious) num.toFixed(precious);const func new Function(str);func()(2232, 2); // 2232.00// 或者const str return (num, precious) ${num.toFixed(precious)};const func new Function(str);func()(2232, 2); // 2232.00低代码示例{ type: page, data: { num: -49.89, percentNum: -0.8899, getMyPercent: return (num,precious2){if(!/\\d\\.?/.test(String(num))){return -};const [start,end](num*100).toFixed(precious).split(.);let val(num*100).toFixed(precious);if(end){val(start-0).end};return val%;\n};, getMyMoneyNumber: return (num,precious2){if(!/\\d\\.?/.test(String(num))){return -};const [start,end]num.toFixed(precious).split(.);let val(num-0).replace(/\\B(?(\\d{3})(?!\\d))/g, ,);if(end){val(start-0).replace(/\\B(?(\\d{3})(?!\\d))/g, ,).end;\n};\n return val;}; }, body: [ { type: form, debug: true, body: [ { type: tpl, tpl: % var f1new Function(data.getMyMoneyNumber);return f1()(data.num) % }, { type: divider }, { type: tpl, tpl: % var f1new Function(data.getMyPercent);return f1()(data.percentNum) % } ] } ] }参考文档地址https://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/template#javascript-%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8Ehttps://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/template#javascript-%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8Ehttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Functionhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function注意事项问题描述例如amis低代码页面JavaScript的toFixed方法对负数的转换有问题(-0.1111).toFixed(4)结果却是“-00.1111”普通情况下toFixed方法是不可能出现这种问题的可能代码中重写了toFixed方法检查一下项目代码或者应用设置-基本设置-css/js位置。解决方法1使用Math.abs转换为绝对值再根据大于0或者小于0加上前缀或者-号{ type: static-tpl, tpl: ${num0?:num0?-:}${{num: num, precious: precious||4, numType: NUMBER}|eval_func:function transData(params){console.log(\\\\, params);return params.num|| params.num 0 ? (Math.abs(params.num)*(params.numType \\RATE\\ ? 100 : 1)).toFixed(params.precious) : \\-\\}|number}, name: num, label: 金额, placeholder: -, classNameExpr: ${num0?text-success:num0?text-danger:}, id: u:7f9fa6390edc }2先toFixed然后使用split将小数点分割左右截取start, end左边的数字字符串通过-0或者Number方法转换为数字右边不变最后拼接${start}.${end}或者[start,end].join(.)例如第4、5点就是这么做的3找到重写toFixed代码处直接在原来的数字字符串基础上改Number.prototype.toFixed function (precision) { const value ...问题代码略... const roundNumStr value.replace(/^\-0{2,}/, -0).replace(/^\-0[1-9]/, str -str.substring(2)); return ${roundNumStr}; }