一道天猫的面试题: 手写一个模版字符串

前言

同事去面试天猫，分享出来的面试题，这道面试题，是需要在面试之后发送给面试官的，属于开放性的题目。自己试着解答了一下。

题目

问题：实现一个简单的模板渲染

给定一个模板和一个对象，利用对象中的数据渲染模板，并返回最终结果。

例如：

let template = '你好，我们公司是{{company}}，我们属于{{group.name}}业务线，我们在招聘各种方向的人才，包括{{group.jobs[0]}}、{{group["jobs"][1]}}等。'

let obj = {
  group: {
    name: "天猫",
    jobs: ["前端", "后端", "产品"]
  },
  company: '阿里巴巴'
}

function render(template, obj){
  // 代码实现
}
// 最终返回结果为 你好，我们公司是阿里巴巴，我们属于天猫业务线，我们在招聘各种方向的人才，包括前端、后端等。

解答

function render(template, data) {
  const _fn = new Function("data", `
    const arr = [];
    // with会将data添加到作用域链的顶部
    with(data){
      arr.push('${
        template
          .replace(/\t/g, " ") // 首先替换template中原本的\t
          .split("{{").join("\t") // 将{{替换成\t
          .replace(/\t(.*?)}}/g, "',$1,'") // 将 变量}} 替换成 ,变量,
      }')
      return arr.join('')
    }
  `);
  return _fn(data);
}

// 你好，我们公司是阿里巴巴，我们属于天猫业务线，我们在招聘各种方向的人才，包括前端、后端等。
render(
    '你好，我们公司是{{company}}，我们属于{{group.name}}业务线，我们在招聘各种方向的人才，包括{{group.jobs[0]}}、{{group["jobs"][1]}}等。',
    {
        group: {
          name: "天猫",
          jobs: ["前端", "后端", "产品"]
        },
        company: '阿里巴巴'
    }
)