Node / Pug / Jade 插入變量

Question

我有一大堆數據被傳遞到 Node 應用程序中的一個視圖，其中一大堆數據與預算有關，特別是報價與實際。

變量都以類似的方式命名，就像這樣

s_budget_quote_labour = 500
s_budget_actual_labour = 400
s_budget_quote_food = 1000
s_budget_actual_food= 1100

我想在我的 Pug 模板中創建一個自定義數組，它包含所有成本“類型”，然后迭代它們，將成本類型傳遞到變量名稱中。 基本上是這樣的：

    - expenseArray = ['Food', 'Labor']
    - each expense, i in expenseArray
      - var expense_budget = 'info.s_budget_' + expense  
      - var expense_actual = 'info.s_actual_' + expense  
      tr
        td ${expense}
        td ${expense_budget}
        td ${expense_actual}

這個想法是它會遍歷我數組中的所有項目，並將正確的 html 放在一起來構建我的費用表。 我也試過用幾種不同的方式將它直接輸送到 td 中，但沒有運氣。 樣品...

td #{info.s_actual_${expense}}
td !{info.s_actual_${expense}}

和其他一些變體......都沒有運氣。 知道這是否可能以及如何做到嗎？

Answer 1

eval應該讓您獲得具有動態名稱的變量。 您可以使用.toLowerCase使大小寫匹配：

- expenseArray = ['Food', 'Labor']
- each expense, i in expenseArray
  - var expense_budget = eval('info.s_budget_' + expense.toLowerCase())
  - var expense_actual = eval('info.s_actual_' + expense.toLowerCase())
  tr
    td ${expense}
    td ${expense_budget}
    td ${expense_actual}

但是，如果用戶可以指定expenseArray的值，則eval可能會導致安全問題。 這些用戶可能會導致訪問該頁面的任何人運行任意 JavaScript。 如果您需要該解決方案支持費用類型名稱中的空格或特殊字符，則該解決方案還需要更多代碼。 所以我不推薦這個。

相反，您應該更改發送到您的視圖的info變量的格式。 使用特殊命名方案發送一個對象或Map ，而不是多個變量。 例如， info可能是這樣的：

var info = {
  'Labour': {quote: 500, actual: 400},
  'Food': {quote: 1000, actual: 1100},
}

然后你的模板是這樣的：

- expenseArray = ['Food', 'Labor']
- each expense, i in expenseArray
  - var expense_budget = info[expense].quote
  - var expense_actual = info[expense].actual
  tr
    td ${expense}
    td ${expense_budget}
    td ${expense_actual}