使用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" = 23

实际结果:http://example.com/？ name = $ {name}&age = $ {age}

在这种情况下,不能用绳子插做的是有没有更好的方法比String.prototype.replace像

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

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"

Answer 2

如上所述，不可能使用变量作为模板，也许，如果你确实需要实现它，并且你的环境是安全的，你可以使用eval

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

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

var url = eval(`\`${template}\``);

但再次强调，请谨慎使用eval。我建议您在开始在代码中使用eval之前阅读这篇文章或类似的文章。

附言。我确信，会有很多人因此而否决我的答案：D

Answer 3

也许我误解了您的问题/用例，但您应该能够在没有“模板”变量的情况下做到这一点。. . 只需将您当前分配给“模板”的值直接分配给“url”并使用反引号而不是引号：

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

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

这导致： http://example.com/?name=John&age=30

Answer 4

如果值之后仍然想要使用模板,您将如何处理此问题:

var template = (name, age) => `http://example.com/?name=${name}&age=${age}`;

// these come after template is defined
var name = "John";
var age = "30";

console.log(template(name, age));

如果问题是关于递归的话:

你使用双引号"而不是反引号`

否则会起作用:

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

var url = `${template}`;

https://jsfiddle.net/kab48ht5/

如果您要尝试的只是将某些值转换为正确的URL格式,则可以尝试遵循此解决方案:https://stackoverflow.com/a/22678412/185672

Answer 5

您可以像这样直接在字符串中使用它。

此处的文档： https: //developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals - 归功于@jetpackpony

const name = 'John'
const age = 23

console.log(`Hi my name is ${name}`)

console.log(`http://example.com/?name=${name}&age=${age}`)

@Phil 提出了递归问题的快速解决方案，只要您在初始模板声明上使用反引号即可。

关于最初的问题（以及缺乏明确的答案），也许解释得不够。如果您在模板文字之后声明模板变量，则无法使用它们。