Как использовать буквальные кавычки в JavaScript?
Это мой код:
const myFunction = () => {
let winnerScreen = "images/winner.png";
let winnerId = "winnerScreen";
document.getElementById("output").innerHTML='<img id='+winnerId+" "+'src='+winnerScreen+'/>';
}
У меня такое ощущение, что я могу написать эту функцию в одну строку, но я не знаю, как использовать буквальные кавычки в JavaScript.
Кто-нибудь может мне помочь?
Мне действительно трудно читать этот код из-за плохого контраста между ним и остальной страницей.
вы хотите написать функцию в одну строчку?
Прошу прощения за использование снимков экрана, это мой первый пост на этом форуме, и я не знал, что это правило, я сделаю это в своих следующих сообщениях.
Теперь вы можете отредактировать свой пост и заставить его следовать правилам. Не нужно ждать следующего вопроса. Голосование за закрытие.
Вы все еще можете редактировать свой текущий вопрос. Ввод фактического кода требует меньше усилий, чем создание снимка экрана. Это также помогает всем, кто хочет помочь вам, поскольку они могут просто скопировать и вставить его в свой ответ и внести изменения.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
это будет однострочный шаблон с литералом:
const myFunction = () => document.getElementById('output').innerHTML = `<img id='${"winnerScreen"}' src='${"images/winner.png"}' />'`;
myFunction();<div id = "output"></div>Но в этом случае нет смысла использовать литерал шаблона, так как вы можете просто передать строки ..
const myFunction = () => document.getElementById('output').innerHTML = "<img id='winnerScreen' src='images/winner.png' />";
myFunction();<div id = "output"></div>ПРИМЕЧАНИЕ:
Вы можете записать строку, используя кавычки
"и'(как в последнем фрагменте):"<img id='winnerScreen' src='images/winner.png' />"или только тип одинарной кавычки, такой как
', и использование экранирования строки\', выглядит следующим образом:'<img id=\'winnerScreen\' src=\'images/winner.png\' />'
Сделайте вот так. Используйте обратную кавычку и $.
let winnerId = 1;
let winnerScreen = 'https://unknownSource.com/uk.jpg'
var _str = `<img id = "${winnerId}" src = "${winnerScreen}">`;
console.info(_str)Если я попробую это сделать, появится следующее сообщение об ошибке: «Строковые шаблоны не поддерживаются текущей версией JavaScript». Я использую WebStorm 2017.2.4 с ECMAScript 5.1. Следует ли мне обновиться до ECMAScript 6 или есть какие-то причины для этого?
Вам нужно изменить версию js ecma6 из webstorm
Напишите строковый литерал, например:
document.getElementById('output').innnerHTML = `<img id=${winnerId} src=${winnerScreen} />`;
Но лучше поместить " вокруг атрибутов HTML:
document.getElementById('output').innnerHTML = `<img id = "${winnerId}" src = "${winnerScreen}" />`;
Или, если вы хотите, чтобы вся функция была в одной строке:
const myfunction = () => document.getElementById('output').innnerHTML = '<img id = "images/winner.png" src = "winnerScreen" />';
Но это немного глупо, не пытайтесь сохранить строки, вместо этого попробуйте сохранить читаемость кода.
Это все равно будет стоить мне 3 строчки, есть ли способ сделать это одной строчкой?
Что ты имеешь в виду? Это всего одна строчка. На самом деле нет никакого способа уплотнить код дальше, если вы это имеете в виду.
Я думаю, он хочет, чтобы функция была однострочным
Да, вся функция как одна строка :) это возможно?
@CertainPerformance большое спасибо за помощь и знания! :)
В новых версиях вы можете использовать обратные кавычки (`) и работать более или менее как в PHP, используя интерполяцию:
document.getElementById("output").innerHTML= `<img id = "${winnerId}" src = "${winnerScreen}">`
Помните, что:
- атрибуты должны быть заключены в двойные кавычки
- пожалуйста избегайте использования скриншотов для кода.
Извините, я новичок на этом форуме, буду делать заметки! :) И спасибо за помощь.
"атрибуты должны быть заключены в двойные кавычки" - одинарные кавычки тоже подходят - w3.org/TR/html4/intro/sgmltut.html#h-3.2.2
Я предполагаю, что вы имеете в виду, как использовать кавычки в кавычках.
У вас есть 2 варианта котировок.
" и '.
Внутри каждого вы можете использовать другой.
document.getElementByID('output').innerHTML = "<img id='winnerScreen' src='images/winner.png'>";
Мне было интересно, почему все остальные ответы касались шаблонных литералов, когда они уже существуют и их легче сделать. Я просто хочу добавить, что вы также можете избегать кавычек - "this is a string with \"quoted\" text" - также работает с обоими типами кавычек.
Потому что здесь задействованы переменные, и ваш ответ полностью игнорирует этот факт.
@Cranio Подсказка состояла из одной строчки. Возможно, он не хочет переменных. Я еще не мог комментировать. И я - нет - сейчас.
@Cranio вопрос не делает очевидным, что переменные нужный. Все, что он говорит, это то, что ему нужно, чтобы этот код был в одной строке, что было бы, если бы вы удалили переменные. Если вы используете шаблонный литерал, вам по-прежнему нужны переменные, поэтому это не будет одной строкой. В противном случае нет реальной причины нет использовать простую строку. Вопрос в его нынешнем виде не может быть истолкован как «как мне включить переменные в строку» - он буквально просто упоминает кавычки.
Если вы просто добавили свой код в сообщение в виде текста ...