在 Javascript 中使用变量格式化字符串模板

Question

我想使用静态定义的模板来构建 URL。

我正在尝试为此使用 ES6 字符串插值功能

var template = "http://example.com/?name=${name}&age=${age}";

var name = "John";
var age = "30";

var url = `${template}`;

预期结果： http://example.com/?name=John&age =23

实际结果： http://example.com/?name = \({name}&age=\){age}

如果这不能通过字符串插值来完成，有没有比 String.prototype.replace 更好的方法，比如

var url = template.replace(/\${name}/,"John").replace(/\${age}/, 23);

原文由 humkins 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

变量在评估文字时被替换，所以你不能创建一个可以稍后用变量替换的通用模板：

 var template = `http://example.com/?name=${name}&age=${age}`;
var name = "John";
var age = "30";

console.log( template ); // "http://example.com/?name=undefined&age=undefined"

编辑：为那些重用控制台会话并从以前的实验中定义变量的人提供小提琴： https ://jsfiddle.net/nwvcrryt/

您也不能将字符串文字 "My name is ${name}" 转换为您正在尝试执行的模板。

但是，您可以使用一个函数来获取姓名和年龄并返回所需的 url：

 const formatUrl = (name, age) => `http://example.com/?name=${name}&age=${age}`;
let name = "John";
let age = "30";
let url = formatUrl( name, age ); // "http://example.com/?name=John&age=30"

原文由 pawel 发布，翻译遵循 CC BY-SA 3.0 许可协议