如何将JavaScript循环变量传入${}模板语法？

嘿，我明白你的问题了——你想在JavaScript的for循环里用变量i来动态访问数组SALE_DATA.SALE_ORDER_ITEMS_LIST中对应元素的WEIGHT属性，但原来的写法行不通，对吧？

问题出在哪？ #

你原来的代码里，${SALE_DATA.SALE_ORDER_ITEMS_LIST[i].WEIGHT}是试图让后端模板引擎直接解析这个表达式，但此时i是JavaScript运行时的循环变量，后端渲染页面的时候根本不知道i的值，所以这种写法会直接报错，或者渲染出无效的内容。

正确的解决方案 #

我们需要先把后端的SALE_DATA整个转换成JavaScript可以直接操作的变量，然后在JS循环里用i来动态访问数组元素。具体做法如下：

<script>
// 先把后端的SALE_DATA转成JSON字符串，渲染成JS变量
const saleData = ${JSON.stringify(SALE_DATA)};

document.write("<table border=2 width=50%>");
for (var i = 0; i < saleData.SALE_ORDER_ITEMS_LIST.length; i++) {
    document.write("<tr>");
    // 现在用JS变量动态访问对应元素的WEIGHT属性
    document.write("<td>" + saleData.SALE_ORDER_ITEMS_LIST[i].WEIGHT + "</td>");
    document.write("<td>" + i + "</td>");
    document.write("</tr>");
}
document.write("</table>");
</script>

为什么这样能行？ #

JSON.stringify(SALE_DATA)会把后端的SALE_DATA对象转换成合法的JSON字符串，渲染到JS代码里后，就变成了一个JavaScript对象saleData。这样在JS循环运行时，就能用i作为索引，动态访问数组里的每一个元素及其WEIGHT属性了。

更优的写法（推荐） #

其实document.write在现代前端开发中并不推荐，因为如果页面已经加载完成后调用它，会直接覆盖整个页面。更安全灵活的方式是用DOM操作来创建表格：

<script>
const saleData = ${JSON.stringify(SALE_DATA)};

// 创建表格元素并设置属性
const table = document.createElement('table');
table.setAttribute('border', '2');
table.style.width = '50%';

// 遍历数组生成行和单元格
saleData.SALE_ORDER_ITEMS_LIST.forEach((item, index) => {
    const row = table.insertRow();
    // 权重单元格
    const weightCell = row.insertCell();
    weightCell.textContent = item.WEIGHT;
    // 索引单元格
    const indexCell = row.insertCell();
    indexCell.textContent = index;
});

// 把表格添加到页面中
document.body.appendChild(table);
</script>

这种写法不仅避免了document.write的潜在问题，代码结构也更清晰，维护起来更方便。

内容的提问来源于stack exchange，提问作者V L Sudhakar Inampudi