JavaScript中string.replace无法替换模板占位符问题求助

你代码的核心问题是后续替换操作始终基于原始模板temp，而非已完成部分替换的output：

第一次赋值时，你把temp替换后的结果存到了output，但之后每一步替换都重新使用temp.replace(...)覆盖output，这导致前面所有的替换操作全部失效，最终只有最后一次替换（{%DESCRIPTION%}）的结果被保留，其他占位符自然不会被替换。

修正后的代码 #

const replaceTemplate = function (temp, product) {
  let output = temp.replace(/{%PRODUCTNAME%}/g, product.productName);
  console.log(product.productName);
  // 所有后续替换都基于已更新的output变量
  output = output.replace(/{%IMAGE%}/g, product.image);
  output = output.replace(/{%PRICE%}/g, product.price);
  output = output.replace(/{%FROM%}/g, product.from);
  output = output.replace(/{%NUTRIENTS%}/g, product.nutrients);
  output = output.replace(/{%QUANTITY%}/g, product.quantity);
  output = output.replace(/{%ID%}/g, product.id);
  output = output.replace(/{%DESCRIPTION%}/g, product.description);

  if (!product.organic)
    output = output.replace(/{%NOT-ORGANIC%}/g, "not_organic");

  return output;
};

额外检查点 #

如果替换仍不生效，可以验证以下两点：

• dataObj中每个对象的属性名（如productName、image）是否与模板占位符完全对应，没有拼写或大小写错误
• tempCard中的占位符写法（如{%PRODUCTNAME%}）是否和正则表达式中的匹配，没有多余空格或符号差异

内容的提问来源于stack exchange，提问作者defoxtrotalpha