Drcus | 王亚振

Drcus | 王亚振

随便写,记录点东西

一个有趣的JS题

发布于:  

一个有趣的JavaScript 面试题

var obj = {
  "name": "wyz",
  "age": 26,
  "job": {
    "a": "aaaa",
    "b": "bbbb"
  }
}
var str = "my name is ${name}, age: ${age}, job: ${job.a}, ${job.b}"
// 实现一个 render 函数 输出:
// "my name is wyz, age: 26, job: aaaa, bbbb"

大概写个简单的模板解析器


先思考一下 ,下面是我的答案。

function render(obj, str) {
 return str.replace(/\${+(\w|\.)+\}/g, value => 
   value.replace(/\${/, '').replace(/\}/, '').split('.').reduce((o,k) => o[k], obj)
 )
}

下面还有其它路子的方法,原理是用eval方法直接使用es6的模版字符串解析

  1. 使用eval 把 对象的key 用var 都声明一遍

    function render(obj, str) {
     eval(`var {${Object.keys(obj).join(',')}} = obj`)
     return eval('`'+ str +'`')
    }
  2. 使用 with 和 eval

    function render(obj, str) {
       with(obj) {
           return eval('`'+ str +'`')
       }
    }

Javascript 语言精粹里面有讲,尽量不要用 with, 该方法会造成执行缓慢,效率不好。

所以最优的方法是最上面正则的方法。

~^_^~ 一片小花园 ?

赏赐