采用'模板的最佳方法是什么?字符串并将信息插入其中。
例如:
var templateString = "Hello {name1}, my name is {name2}";
var name1 = "Phil";
var name2 = "Amy";
是否有一个简单的名称可以插入由大括号包围的变量名称的值?我需要这个不仅适用于这个例子(所以通过固定索引不是一个选项),但是对于任何给定的模板字符串和任何给定数量的变量。
答案 0 :(得分:5)
您可以使用ES2015 template literals。但是,应该在使用它们之前定义变量。
var name1 = "Phil";
var name2 = "Amy";
var templateString = `Hello ${name1}, my name is ${name2}`;
console.log(templateString);
document.body.innerHTML = templateString;
对于ES2015之前的版本,您可以使用正则表达式替换变量。为此,可以创建具有搜索替换值的对象,并且可以使用具有函数作为参数的String#replace
。
正则表达式\{([^}]*)\}
可用于匹配大括号包围的字符串。
// Create an object of the key-value of search-replace
var obj = {
name1: "Phil",
name2: "Amy"
};
var templateString = "Hello {name1}, my name is {name2}";
// Use replace with callback function
var result = templateString.replace(/\{([^}]*)\}/g, function($0, $1) {
return obj[$1] || $0; // If replacement found in object use that, else keep the string as it is
});
console.log(result);
document.body.innerHTML = result;
RegEx说明:
\{
:匹配{
括号文字([^}]*)
:匹配}
次以外的任何内容,并将其添加到第一个捕获的组中。\}
:匹配}
括号文字g
:全球旗帜。匹配遵循此模式的所有可能字符串。 注意: $0
是完整字符串,即{foo}
,$1
是第一个捕获的组foo
。
答案 1 :(得分:1)
您可以使用javascript函数替换:http://www.w3schools.com/jsref/jsref_replace.asp
所以你的代码是:
var templateString = "Hello {name1}, my name is {name2}";
var name1 = "Phil";
var name2 = "Amy";
templateString = templateString.replace('{name1}', name1);
templateString = templateString.replace('{name2}', name2);
如果这不起作用,请告诉我。
答案 2 :(得分:0)
ES6有字符串插值,你可以这样做
var name1 = "Phil";
var name2 = "Amy";
var templateString = `Hello ${name1}, my name is ${name2}`;
document.write(templateString);
答案 3 :(得分:0)
在ES5中,您可以使用String.replace:
var templateString = "Hello {name1}, my name is {name2}";
var name1 = "Phil";
var name2 = "Amy";
templateString.replace(/\{([^}]*)\}/g, function (m, v) { return eval(v) || m; })
请注意,建议不要使用eval。如果在对象中设置名称,则可以执行以下操作:
var templateString = "Hello {name1}, my name is {name2}";
var names = {};
names.name1 = "Phil";
names.name2 = "Amy";
templateString.replace(/\{([^}]*)\}/g, function (m, v) { return names[v] || m; })