欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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#)。注:一些高级语言的反射非常耗性能。