[英]Nested string literals in Javascript
我正在嘗試創建一個 function 來接收 2 個參數並返回一個模板字符串。 如果發生這種情況: window.location.href.endsWith('BRONCHOSCOPY')
,我想運行一個 function 生成下面的代碼(但需要根據第二個參數更改 procedure1 編號以從大批)。
if (window.location.href.endsWith('BRONCHOSCOPY')) {
extraInfo.innerHTML = `<b>${thoracics.procedures.procedure1.extraInfo}</b>`;
procedure.innerHTML = `<b>${thoracics.procedures.procedure1.name}<b>`;
firstColumn.innerHTML = `${thoracics.procedures.procedure1.textFirstColumn}`;
secondColumn.innerHTML = `${thoracics.procedures.procedure1.textSecondColumn}`;
icon.innerHTML = `<img src="${thoracics.src}" width="40" height="40" class="d-inline-block align-top" alt="${thoracics.alt}' loading="lazy"></img>`;
}
我有一個像這樣的 function:
function procedureInfo(arg, x) {
return `extraInfo.innerHTML = <b>${${arg}.procedures.procedure.extraInfo}</b>
procedure.innerHTML = <b>${${arg}.procedures.procedure${x}.name}<b>
firstColumn.innerHTML = ${${arg}.procedures.procedure${x}.textFirstColumn}
secondColumn.innerHTML = ${${arg}.procedures.procedure${x}.textSecondColumn};
icon.innerHTML = <img src="${${arg}.src}" width="40" height="40" class="d-inline-block align-top" alt="${${arg}.alt}' loading="lazy"></img>`
}
JS 不喜歡這種語法,比如嵌套數組,我相信有一種更簡單的方法可以做到這一點。
請記住,使用動態內容設置innerHTML
是危險的,因為它會在您的應用程序中創建XSS 漏洞。
考慮到這一點,為什么不像這樣返回 function 呢?
function procedureInfo(arg, x) {
return () => {
const procedure = arg.procedures[`procedure${x}`];
extraInfo.innerHTML = `<b>${procedure.extraInfo}</b>`;
procedure.innerHTML = `<b>${procedure.name}<b>`;
firstColumn.innerHTML = procedure.textFirstColumn;
secondColumn.innerHTML = procedure.textSecondColumn;
icon.innerHTML = `<img src="${arg.src}" width="40" height="40" class="d-inline-block align-top" alt="${arg.alt}" loading="lazy" />`;
};
}
const code = procedureInfo(thoracics, 1);
// later...
// instead of eval(code);
code();
您也可以考慮將thoracics.procedures
設為數組,而不是使用編號屬性的 object,以簡化訪問適當嵌套屬性的邏輯。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.