Форматировать шаблон строки с переменными в 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= $ {имя} & возраст = $ {возраст}

В случае, если это не может быть сделано со строчной интерполяцией, существует ли какой-либо лучший способ, чем String.prototype.replace, например

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

Answer 1

Вы должны использовать его так, прямо в строку.

Docs здесь: 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 2

переменных заменяется на момент оценки буквального, так что вы не можете создать универсальный шаблон, который может быть замещен переменными позже:

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" 

Edit: скрипка для тех, кто повторно консоли сессии и имеют переменные, определенные из предыдущих экспериментов: 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 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

Как уже упоминалось выше, нельзя использовать переменную в качестве шаблона, может быть, если вам действительно нужно реализовать, и среда является безопасным, вы можете использовать Eval

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

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

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

Но опять же, использовать Eval с Предупреждение. Я рекомендую вам прочитать this или аналогичные статьи, прежде чем вы начнете использовать в своем коде eval.

PS. Я уверен, что будет много людей, которые уменьшат мой ответ из-за этого: D