极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。
每天晚上九点 B站讲解前端工程化直播,并解答相关问题。

# 实现一个 render/template 函数,可以用以渲染模板

更多描述

const template = '{{ user["name"] }},今天你又学习了吗 - 用户ID: {{ user.id }}';

const data = {
  user: {
    id: 10086,
    name: "山月",
  },
};

//=> "山月,今天你又学习了吗 - 用户ID: 10086"
render(template, data);

注意:

  1. 注意深层嵌套数据
  2. 注意 user['name'] 属性

关于复杂的模板编译解析执行,可参考 mustache (opens new window)handlebars.js (opens new window) :::

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 678 (opens new window)

代码可见 实现一个 render/template 函数,可以用以渲染模板 - codepen (opens new window)

function get(source, path, defaultValue = undefined) {
  // a[3].b -> a.3.b -> [a, 3, b]
  const paths = path
    .replace(/\[(\w+)\]/g, ".$1")
    .replace(/\["(\w+)"\]/g, ".$1")
    .replace(/\['(\w+)'\]/g, ".$1")
    .split(".");
  let result = source;
  for (const p of paths) {
    result = result?.[p];
  }
  return result === undefined ? defaultValue : result;
}

function render(template, data) {
  return template.replace(/{{\s+([^\s]+)\s+}}/g, (capture, key) => {
    return get(data, key);
  });
}
function render(template, data) {
  return template.replace(/({{).*?(}})/g, function (...args) {
    return Function(`return this.${args[0].slice(2, -2).trim()}`).call(data);
  });
}
function template(input, data) {
  const regex = RegExp(/\{\{([\w|\.|\[|\]|"]+)\}\}/, "g");
  let result;
  while ((result = regex.exec(input)) !== null) {
    // input字符串不能修改
    const [pattern, key] = result;
    // 由于改变了原字符串,但regex.lastIndex并未被重置,仍然从此位置开始匹配
    input = input.replace(pattern, eval(`data.${key}`));
    regex.lastIndex = 0; // 重置lastIndex;
  }
  return input;
}
Last Updated: 11/27/2021, 10:11:48 AM