是否可以创建一个模板字符串作为一个普通的字符串，
let a = "b:${b}";
然后把它转换成一个模板字符串，
let b = 10;
console.log(a.template()); // b:10
没有eval, new Function和其他动态代码生成的手段?
当前回答
仍然是动态的，但似乎比使用裸eval更可控:
const vm = require('vm')
const moment = require('moment')
let template = '### ${context.hours_worked[0].value} \n Hours worked \n #### ${Math.abs(context.hours_worked_avg_diff[0].value)}% ${fns.gt0(context.hours_worked_avg_diff[0].value, "more", "less")} than usual on ${fns.getDOW(new Date())}'
let context = {
hours_worked:[{value:10}],
hours_worked_avg_diff:[{value:10}],
}
function getDOW(now) {
return moment(now).locale('es').format('dddd')
}
function gt0(_in, tVal, fVal) {
return _in >0 ? tVal: fVal
}
function templateIt(context, template) {
const script = new vm.Script('`'+template+'`')
return script.runInNewContext({context, fns:{getDOW, gt0 }})
}
console.log(templateIt(context, template))
https://repl.it/IdVt/3
其他回答
这样做(这样做):
让a = 'b:${this.b}' 令b = 10 函数template(templateString, templateVars) { 返回new函数('return " + templateString + ' ").call(templateVars) ｝ 结果。textContent = template(a， {b}) < b id =结果> < / b >
@Mateusz Moska，解决方案很好，但当我在React Native(构建模式)中使用它时，它抛出一个错误:无效字符'”，尽管当我在调试模式下运行它时它是有效的。
所以我用正则表达式写出了我自己的解。
String.prototype.interpolate = function(params) {
let template = this
for (let key in params) {
template = template.replace(new RegExp('\\$\\{' + key + '\\}', 'g'), params[key])
}
return template
}
const template = 'Example text: ${text}',
result = template.interpolate({
text: 'Foo Boo'
})
console.log(result)
演示:https://es6console.com/j31pqx1p/
注:因为我不知道问题的根本原因，我在react-native repo中提出了一张票，https://github.com/facebook/react-native/issues/14107，这样一旦他们能够修复/指导我大致相同:)
我知道我来晚了，但你可以:
Const a = (b) => ' b:${b} '; 令b = 10; console.log (a (b));/ / b: 10
这个解决方案不需要ES6:
function render(template, opts) {
return new Function(
'return new Function (' + Object.keys(opts).reduce((args, arg) => args += '\'' + arg + '\',', '') + '\'return `' + template.replace(/(^|[^\\])'/g, '$1\\\'') + '`;\'' +
').apply(null, ' + JSON.stringify(Object.keys(opts).reduce((vals, key) => vals.push(opts[key]) && vals, [])) + ');'
)();
}
render("hello ${ name }", {name:'mo'}); // "hello mo"
注意:Function构造函数总是在全局作用域中创建，这可能会导致全局变量被模板覆盖，例如render("hello ${someGlobalVar = 'some new value'}"， {name:'mo'});
我喜欢s.m ijer的回答，并在他的基础上写了自己的版本:
function parseTemplate(template, map, fallback) {
return template.replace(/\$\{[^}]+\}/g, (match) =>
match
.slice(2, -1)
.trim()
.split(".")
.reduce(
(searchObject, key) => searchObject[key] || fallback || match,
map
)
);
}
