Используя переменную внутри кавычек в javascript [duplicate]

Shane Byrne спросил: 28 марта 2018 в 01:40 в: javascript

У этого вопроса уже есть ответ:

  • How can I do string interpolation in JavaScript? 15 ответов
document.body.style.backgroundImage = "url('images[0]')";

Я хочу установить backgroundImage элемента body CSS как изображение, которое я сохранил в , однако всякий раз, когда я пытаюсь это сделать, я получаю сообщение об ошибке в консоли javascript, говоря image[0].

Я предполагаю, что это потому, что он ищет изображение, называемое net::ERR_FILE_NOT_FOUND, который не существует, и поэтому я получаю сообщение об ошибке. Как я могу установить его так, чтобы он читал изображение, которое фактически хранится в 'images[0]'?

Извините, если это было задано раньше, я не мог найти никаких других вопросов, например, когда Я посмотрел.

4 ответа

Есть решение
ответил: 28 марта 2018 в 01:42

Взгляните на эти простые строки:

Я уверен, что вы пропускаете цитаты ". Таким образом, вы можете объединить ваши variable и "url()", используя символ Plus (+), чтобы получить что-то вроде этого: "url('"+images[0]+"')"


let images = ["https://pbs.twimg.com/profile_images/643819371656294405/F-pVCbHg_400x400.png"]

document.body.style.backgroundImage = "url('"+images[0]+"')";

Или другой способ - использовать современный метод с использованием этой строки (см. документы):

let images = ["https://pbs.twimg.com/profile_images/643819371656294405/F-pVCbHg_400x400.png"]

document.body.style.backgroundImage = `url('${images[0]}')`;
Artem Rapoport ответил: 28 марта 2018 в 01:42

Попробуйте вместо этого document.body.style.backgroundImage = "url(" + images[0] + ")";.

С ES2015 вы также можете добиться этого с помощью обратных клавиш `
Документы: https://developer.mozilla.org/en-US/docs / Web / JavaScript / Справка / Template_literals

ответил: 28 марта 2018 в 01:43

Современный JS имеет шаблонный синтаксис , который предоставляет возможности интерполяции строк.

document.body.style.backgroundImage = `url('${images[0]}')`;

Как видите, шаблонный литерал ограничивается парой внешних обратных галочек вместо типичных одинарных или двойных кавычек.

Интерполяция в литерале шаблона происходит путем включения выражения, которое должно быть оценено в разделитель. Результатом выражения становится введенное значение.

neuro_sys ответил: 28 марта 2018 в 01:43

В современном JavaScript это достигается с помощью литералов шаблона.

Таким образом, вы можете сделать следующее:

document.body.style.backgroundImage = `url('${images[0]}')`;