JS弱类型语言的优势——之模板字符串
程序员文章站
2022-05-04 11:17:25
ES6中,开始支持模板字符串。 尽管Java和C#这样的高级语言有非常多吸引人的地方,但是想js这样的弱类型语言,也有独到之处。 equType:有四种类型,分别是:chl、chwp、cwp、cot,后端java接口提供了四个接口,四个接口对应四个函数调用,每一个函数名的规则是[equType]Co ......
es6中,开始支持模板字符串。
尽管java和c#这样的高级语言有非常多吸引人的地方,但是想js这样的弱类型语言,也有独到之处。
equtype:有四种类型,分别是:chl、chwp、cwp、cot,后端java接口提供了四个接口,四个接口对应四个函数调用,每一个函数名的规则是[equtype]control,
let equdetailservice = {*/ chlcontrol: function(params) { return request.post(url.coldstation.equdetail.chlcontrol, params); }, //冷冻泵启停接口 chwpcontrol: function(params) { return request.post(url.coldstation.equdetail.chwpcontrol, params); }, //冷却泵启停接口 cwpcontrol: function(params) { return request.post(url.coldstation.equdetail.cwpcontrol, params); }, //冷却塔启停接口 cotcontrol: function(params) { return request.post(url.coldstation.equdetail.cotcontrol, params); } };
前端同一个组件在四个不同的页面中使用,组件对应的equtype值不同,根据equtype值不同要调用后端不同的接口。
axios的js调用:
equdetailservice[`${this.equtype}control`](serachobj).then(res => { if (res.code === 200) { //执行成功 } });
后端一个详情页面的接口返回一个json对象,如下数据:
detailinfo:{g1_cot1_on/off: "0.0", g1_cot1_vfd_on/off: "1.0", g1_cot1_frq: "30.0", g1_cot1_frq_set: "50.0", g1_cot1_pwr: "5.0", g1_cot1_pwr_deviceid: 95 g1_cot1_vfd_pwr: "5.0", g1_cot1_vfd_pwr_deviceid: 95 g1_cot1_vfd_alm: "0.0", g1_cot1_pwr_alm: "0.0", g1_cot1_pwr_alm_deviceid: 95, g1_cot1_rem/loc: "1.0", g1_cot1_hrs: "5300.0", g1_cot1_en/dis: "1.0", g1_cot1_rank: "0.0", g1_cot1_pwr_frq: "0.0", g1_cot1_pwr_frq_deviceid: 95, g1_cot1_frq_hand/auto: "0.0", g1_cot2_on/off: "0.0", g1_cot2_vfd_on/off: "1.0", g1_cot2_frq: "30.0", g1_cot2_frq_set: "50.0", g1_cot2_pwr: "5.0", g1_cot2_pwr_deviceid: 96, g1_cot2_vfd_pwr: "5.0", g1_cot2_vfd_pwr_deviceid: 96, g1_cot2_vfd_alm: "0.0", g1_cot2_pwr_alm: "0.0", g1_cot2_pwr_alm_deviceid: 96, g1_cot2_rem/loc: "1.0", g1_cot2_hrs: "5437.0", g1_cot2_en/dis: "1.0", g1_cot2_rank: "0.0", g1_cot2_pwr_frq: "--", g1_cot2_pwr_frq_deviceid: 96, g1_cot2_frq_hand/auto: "0.0", g1_cot3_on/off: "0.0", g1_cot3_vfd_on/off: "1.0", g1_cot3_frq: "30.0", g1_cot3_frq_set: "50.0", g1_cot3_pwr: "5.0", g1_cot3_pwr_deviceid: 97, g1_cot3_vfd_pwr: "5.0", g1_cot3_vfd_pwr_deviceid: 97, g1_cot3_vfd_alm: "0.0", g1_cot3_pwr_alm: "0.0", g1_cot3_pwr_alm_deviceid: 97, g1_cot3_rem/loc: "1.0", g1_cot3_hrs: "5436.0", g1_cot3_en/dis: "1.0", g1_cot3_rank: "0.0", g1_cot3_pwr_frq: "--", g1_cot3_pwr_frq_deviceid: 97, g1_cot3_frq_hand/auto: "1.0",
}
g1是组名,groupnumber会变化,
而前端又是一个组件,好几个页面用,只调用一个接口,接口返回的是个json对象,而不是一个数组,但是前端界面又要显示三个tab,进行数据绑定时,又可以用到模板字符,以取g1_cot1_frq_set这个字符为例,vue数据绑定:
{{detailinfo[`${groupnumber}_cot${index+1}_frq_set`]}}
直接可以把detailinfo中的数据拆分为3项。
java有的语法糖,js有,java没有的语法糖,js还是有,这就是它的强大之处。
总结:模板字符在有些时候可以避免if else和正则表达式校验,类似于后端语言的反射(如c#)。注:一些高级语言的反射非常耗性能。