javascript - 如何编写一个接受字符串和对象并将该对象插入到字符串中的函数？

Question

大家好，我需要编写一个函数，它接受一个字符串和一个对象，并将该对象插入到字符串中，就像这样

// interpolate("Its {weather} outside", {weather: 'damn Hot'})
// returns 'It's damn hot outside'


// interpolate( "Hi my name is {name}", {name: 'John'});
// returns 'Hi my name is John'

无论物体有多深，这样的情况也应该如此

// interpolate("Hi my name is {contact.name}", {contact: {name: 'john'}});

我有点卡住了，起初我尝试将字符串拆分成一个数组，然后尝试将对象值放入数组中，然后将其重新组合在一起，但这对所有测试用例都不起作用，有人可以帮我写这个吗请功能并解释他们的解决方案？谢谢你

所以我尝试了类似的方法，但并不真正适用于所有测试用例，这是一个模板文字，但该函数应该可以将这些值作为其自身的参数，否则我会很困惑。 .

function interpolate(strings, ...keys) {
  return (function(...values) {
    var dict = values[values.length - 1] || {};
    var result = [strings[0]];
    keys.forEach(function(key, i) {
      var value = Number.isInteger(key) ? values[key] : dict[key];
      result.push(value, strings[i + 1]);
    });
    return result.join('');
  });
}

var t1Closure = interpolate`${0}${1}${0}!`;
t1Closure('Y', 'A');  // "YAY!" 
var t2Closure = interpolate`${0} ${'foo'}!`;
console.log(t2Closure('Hello', {foo: 'World'}));  // "Hello World!"

好吧，我越来越接近了，所以我把问题分成了两个函数，需要将它们结合起来，唯一的问题是我不确定如何让最后一个用例在没有模板文字的情况下工作

var something = "something";
var sub = function(str) {
   return str.replace(/#\{(.*?)\}/g,
    function(whole, expr) {
      return eval(expr)
    })
}

console.log(sub("hello #{something}"));



var objectValue = function(str, obj){

     for(key in obj) {
       if(obj.hasOwnProperty(key)) {
          var value = obj[key];
          return str + value;
      }
   }
}


console.log(objectValue("hi my name is ", {contact: {name: 'john'}}));

Answer 1

使用可怕的eval

如果您控制传递的字符串并认为它是安全的，您可以使用eval:

function interpolate (str, obj)  {
    return str.replace(/\{(.*?)\}/g, function (_, ref) {
        return eval('obj.' + ref);
    });
}

var output = interpolate("Its {weather} outside", {weather: 'damn Hot'});
console.log(output);

output = interpolate("Hi my name is {contact.name}", {contact: {name: 'john'}});
console.log(output);

output = interpolate("The highest bid is {rank[0].bid}", {rank: [{bid: 900}, {bid:600}]});
console.log(output);

请注意，如果给定一个字符串，如 '{x;alert("hi")}'，上述函数将执行该 alert，或任何代码被代替。因此，如果字符串由用户提供(或可以更改)，这不是一个好的解决方案。

模板文字

它不跟在你的函数描述符后面，而是template literals已经提供了您正在寻找的功能:

var weather = 'damn Hot';
var output = `It's ${weather} outside`;
console.log(output);

var contact = {name: 'john'};
var output = `Hi my name is ${contact.name}`;
console.log(output);