React中如何替换字符串中的模板变量？Handlebars与项目不兼容

方法一：自定义正则解析（无依赖） #

无需额外引入库，自己实现简单的模板变量解析逻辑，适合基础的变量替换场景：

const message = "component=\"${component.name}\" and id=${id}";
const data = {"id": 101, "component": { "name": "Shiv" }};

function parseTemplate(templateStr, data) {
  // 匹配${xxx}格式的变量片段
  return templateStr.replace(/\${([^}]+)}/g, (match, path) => {
    // 将变量路径拆分为层级数组，比如"component.name"拆成["component", "name"]
    const keys = path.trim().split('.');
    // 从data对象中逐层读取对应值，找不到则保留原匹配内容
    return keys.reduce((current, key) => current?.[key], data) || match;
  });
}

// 若需要将id替换为100，直接修改数据后传入即可
const modifiedData = {...data, id: 100};
const result = parseTemplate(message, modifiedData);
console.log(result); // 输出：component="Shiv" and id=100

方法二：使用Function动态求值（需确保数据可信） #

如果模板逻辑更复杂，且能保证传入的data是完全安全可控的（无恶意内容），可以用这种方式实现：

const message = "component=\"${component.name}\" and id=${id}";
const data = {"id": 101, "component": { "name": "Shiv" }};
const modifiedData = {...data, id: 100};

function parseTemplate(templateStr, data) {
  // 将data的键值对转换为函数参数声明
  const paramStr = Object.keys(data).map(key => `${key}`).join(', ');
  // 构造函数并执行，利用ES6模板字符串完成替换
  return new Function(paramStr, `return \`${templateStr}\`;`)(...Object.values(data));
}

const result = parseTemplate(message, modifiedData);
console.log(result); // 输出：component="Shiv" and id=100

注意：此方法存在代码注入风险，仅适用于数据完全可信的场景。

方法三：React原生JSX语法（组件内直接使用） #

如果是在React组件中使用，直接利用JSX的模板语法即可，完全不存在兼容性问题：

const data = {"id": 101, "component": { "name": "Shiv" }};
const targetId = 100;

function MyComponent() {
  return (
    <span>
      component="{data.component.name}" and id={targetId}
    </span>
  );
}

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