如何使用 js 指定结合文字和 for 循环计数器的输入 id？

Question

我有几个用于“循环”的 js，我需要最简洁的语法来使用“for 循环计数器”指定一个 id 值。这是一个有效的示例，但它看起来很笨拙，而且不得不使用这种简陋的代码并没有让我感到很兴奋。看到那个：

"USCF_ID' +i +'"' +'

// USCF ID #

items += '<td style="display:none;">
<input onblur="showID();" name = "ID" id = "USCF_ID' +i +'"' +' name = "USCF_ID" /> </td>';

你能就在纯 js 中以编程方式表达 ID = USCF_ID1 提出建议吗？没有jQuery如果你能避免的话，请。

Answer 1

您可以使用字符串模板，其中 "USCF_ID' +i +'"' +' 可以替换为 ${id}。字符串模板使用反引号字符定义 - `:

items += `
  <td style="display:none;">
    <input onblur="showID();" name = "ID" id = "USCF_ID${id}" name = "USCF_ID" />
  </td>`;

此外，您可以将模板提取到函数中：

function getItem(id) {
  return `
  <td style="display:none;">
    <input onblur="showID();" name = "ID" id = "USCF_ID${id}" name = "USCF_ID" />
  </td>`;
}

然后您可以将列表生成为：

items += getItem(id);

Answer 2

JS 本身没有像其他语言那样的 built-in 字符串格式（稍后会有例外）。您可以使用 replace 方法在这样的简单情况下自己模拟它：

template = '<td style="display:none;"><input onblur="showID();" name="ID" id="USCF_ID$i" name="USCF_ID"/></td>';
...
items += template.replace("$i", i);

ES6 具有可以执行此操作的模板字符串，但可能不可用，具体取决于您使用的浏览器 trying to support（注意反引号而不是单引号）：

items += `<td style="display:none;"><input onblur="showID();" name="ID" id="USCF_ID${i}" name="USCF_ID"/></td>`;

Answer 3

我很难理解你的问题，但我从你的解释中得到的是，你只是想找到一种更简洁的方法来连接你的数据。我建议您在这里使用 string templates。这是一个例子：

items += `<td style="display:none;">
<input onblur="showID();" name = "ID" id = "USCF_ID${i}" name = "USCF_ID" /> </td>`;

使用 `...` 语法创建字符串会创建一个字符串模板文字，允许您在 ${ } 大括号之间插入 JavaScript 代码并连接结果。

如何使用 js 指定结合文字和 for 循环计数器的输入 id？

How to specify an input id combining a literal and a for loop counter using js?

javascript