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#），注：一些高級語言的反射非常耗性能，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/137183.html
標籤：JavaScript
上一篇：Vue 父子組件之間的通信
下一篇：Vue 非父子組件之間的通信