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}＆amp; 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

如果值过后您仍然想要使用模板，那么您将如何处理此问题：

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/

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

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

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

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

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

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

但是，请再次使用 eval 警告。我建议您在开始在代码中使用 eval 之前阅读this或类似文章。

PS。我敢肯定，会有很多人因为它而拒绝我的答案：D

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已经提出了一个快速解决递归问题的方法，只要你在初始模板声明中使用后退滴答。

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

Answer 6

这个怎么样：

function sFormat(template){
    return data => {
        return Object.keys(data)
                     .reduce((acc, key)=>acc.replaceAll(`\$\{${key}\}`, data[key]), template)
    }
}

let first = "John"
let last = "Doe"
let age = 55
let someData = { a: 1, b: "foo" }

let template = sFormat('Hi ${first}! Your full name: ${first} ${last}, Age: ${age}, Data: ${someData}')
console.log(template({ first, last, age, someData }))

// "Hi John! Your full name: John Doe, Age: 55, Data: [object Object]"

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

6 个答案: