说我有一个变量 str
var str = "123"
现在我可以做console.log(`Hello ${str}`)，它会打印Hello 123
现在我有另一个变量 strnew
var strnew = 'Hello ${str}'
注意（基于答案/评论） -strnew从文件中读取，因此它始终是一个字符串并且不能替换为`
我如何console.log(...)打印Hello 123
有没有可能没有任何种类 eval()
变量的字符串插值
IT技术
javascript
ecmascript-6
2021-03-04 02:51:34
4个回答
像${str}你可以使用简单的字符串替换一样简单的东西：
var template = (tpl, args) => tpl.replace(/\${(\w+)}/g, (_, v) => args[v]);
var tpl = 'Hello ${str} and ${other}';
console.log(template(tpl, {str: 'foo', other: 'bar'}));在一般情况下，不，不可能没有 eval（缺少编写自己的 js 解释器），因为${...}可以包含任意表达式。
为了完整起见，这里是 eval 解决方案：
var template = function(tpl, args) {
var keys = Object.keys(args),
fn = new Function(...keys,
'return `' + tpl.replace(/`/g, '\\`') + '`');
return fn(...keys.map(x => args[x]));
};
function test() {
var myTpl = 'Hello ${str + "!"} and ${other.toUpperCase()}';
console.log(template(myTpl, {str: 'foo', other: 'bar'}));
}
test();您可以使用函数而不仅仅是字符串。
var strnew = function(str){
return `Hello ${str}`;
}
var str = "123";
console.log(strnew(str))感谢这个答案，这里有一些黑魔法代码可以实现你想要的。免责声明 - 这是为了好玩/非常有限和异国情调的应用程序。它可能会非常慢并且在许多边缘情况下会崩溃，但是由于您的问题范围有限，它可以工作。
function getString(){
return "calculating ${foo} + ${bar} = ${foo + bar}";
}
var localEnvironmentProxy = new Proxy({}, {
has(target, prop) { return true; },
get(target, prop) { return (prop in target ? target : window)[prop]; }
});
with(localEnvironmentProxy){
var foo = 1;
var bar = 2;
var templString = getString();
var fnFullText = 'with(arguments[0]){ return `' + templString + '`;}';
var tempalteFn = new Function(fnFullText);
console.log(tempalteFn(localEnvironmentProxy));
//calculating 1 + 2 = 3
}我根据上面@georg 的回答构建了一个typescript解决方案：
public renderTemplate(templateStr: string, args: any): string {
templateStr = templateStr.replace(/`/g, '\\`');
const keys = Object.keys(args);
const fn = new Function(...keys, 'return `' + templateStr + '`');
return fn(...keys.map(key => args[key]));
}
用法也几乎相同。
其它你可能感兴趣的问题