如何基于动态字符串模板生成表格行操作弹窗标题？

核心思路 #

直接通过正则匹配模板中的{{key}}占位符，替换为行数据中对应字段的值，无需拆分数组，逻辑更简洁可靠。

具体实现（以JavaScript为例） #

1. 拿到当前活跃标签页的label_pattern，以及待操作行的rowData
2. 用正则匹配所有{{xxx}}格式的占位符，批量替换为对应数据值
3. 处理边界情况：如果行数据中没有对应字段，可返回空字符串或保留原占位符

代码示例：

// 当前标签页的模板
const labelPattern = "{{code}}, {{description}}, {{category}}";
// 待操作行数据
const rowData = {
  category: "Fruit",
  code: "AP",
  description: "Green Apple",
  hash: "b45516ddda8566ee"
};

// 生成弹窗标题的函数
function generateTitle(pattern, data) {
  // 匹配 {{xxx}} 格式的占位符，捕获其中的字段名
  return pattern.replace(/{{(\w+)}}/g, (_, key) => {
    // 存在对应字段则返回值，否则返回空字符串
    return data[key] ?? '';
  });
}

// 调用生成标题
const popupTitle = generateTitle(labelPattern, rowData);
console.log(popupTitle); // 输出：AP, Green Apple, Fruit

为什么不推荐用split拆分数组？ #

你之前拆分得到的数组带逗号等分隔符，后续还要额外处理分隔符和拼接，反而增加复杂度。正则替换可以直接处理整个模板字符串，一次性完成所有占位符替换，还能兼容不同格式的模板（比如分隔符是空格、分号等场景）。

适配多标签页场景 #

切换标签页时记录当前活跃标签页的label_pattern，在编辑/删除行时，传入对应模板和行数据即可生成匹配的标题。

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