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

Question

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

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

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);

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

String to template string for array of object mapping

javascript

ecmascript-6

string-interpolation

template-strings