对象映射数组的字符串到模板字符串

Question

从 API 数据的某个地方，我得到了正常的字符串，例如“Hi ${person[0].name}”，现在我将这个字符串转换为模板字符串并从对象数组中替换它的变量。

这是我正在尝试执行的 sn-p，但我没有得到预期的输出

const getObjPath = (path, obj, fallback = `$\{${path}}`) => {
    if (path && obj) return path.split('.').reduce((res, key) => res[key] || fallback, obj);
    return path;
};
const interpolate = (template, variables, fallback) => {
    const regex = /\${[^{]+}/g;
    if (template && variables) {
        return template.replace(regex, (match) => {
            let path = match.slice(2, -1).trim();
            path = path.split('|').map((item) => item.trim());
            const fieldValue = getObjPath(path[0], variables, fallback);
            if (fieldValue) return fieldValue;
            return path[1] || fallback;
        });
    }
    return template;
};

const data = { person: [{ name: 'John', age: 18 }] };
const a = interpolate('Hi ${person?.[0]?.name | text} (${person?.[0]?.age | text})', data);
console.log(a);

输出："Hi ${person?.[0]?.name} (${person?.[0]?.age})"

预期输出："Hi John 18"

谁能告诉我我在这里做错了什么？

Answer 1

问题是您在getObjPath 中的路径拆分不处理路径中的方括号。

所以替换这个

path.split('.')

与：

path.match(/[^.[\]]+/g)

const getObjPath = (path, obj, fallback = `$\{${path}}`) => {
    if (path && obj) return path.match(/[^.[\]]+/g).reduce((res, key) => res[key] || fallback, obj);
    return path;
};
const interpolate = (template, variables, fallback) => {
    const regex = /\${[^{]+}/g;
    if (template && variables) {
        return template.replace(regex, (match) => {
            let path = match.slice(2, -1).trim();
            path = path.split('|').map((item) => item.trim());
            const fieldValue = getObjPath(path[0], variables, fallback);
            if (fieldValue) return fieldValue;
            return path[1] || fallback;
        });
    }
    return template;
};

const data = { person: [{ name: 'John', age: 18 }] };
const a = interpolate('Hi ${person[0].name | text} (${person[0].age | text})', data);
console.log(a);