Вставьте переменные javascript в ссылку href в транзакционном электронном письме

Question

Я пытаюсь создать ссылку href url, содержащую некоторые переменные javascript и статический текст для транзакционного электронного письма. Однако мне не удается отобразить ссылку или отображаемый URL-адрес как полный встроенный URL-адрес.

Я попытался заключить их в одинарные кавычки и в несколько других вариантов, но URL и отображаемый URL просто не будут отображаться правильно. Кто-нибудь может помочь исправить это?

var folder = "orders";
var orderNumber = "589";
var refNum = "Mon";
var job = "image";

HTML

<p style="margin: 0;">If that button will not work, copy and paste the following link in your browser:</p>
<p style="margin: 0;"><a href='"https://example.com/ + folder + "/" + orderNumber + "-" + refNum + "-" + job + ".jpg"' target="_blank">'"https://example.com/" + folder + "/" + orderNumber + "-" + refNum + "-" + job + ".jpg"'</a></p>

Answer 1

У вас проблемы с конкатнацией

href='"https://example.com/ + folder +
                           |___________  Here you should have `"`

Вместо этого вы можете просто использовать Шаблонные литералы

var folder = "orders";
var orderNumber = "589";
var refNum = "Mon";
var job = "image";

let link = `<p style="margin: 0;"><a href='"https://example.com/${folder}/${orderNumber}-${refNum}-${job}.jpg' target="_blank">https://example.com/${folder}/${orderNumber}-${refNum}-${job}.jpg</a></p>`

document.querySelector('#link').innerHTML = link

console.log(link)

<div id='link'></div>

Answer 2

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

var folder = "orders";
var orderNumber = "589";
var refNum = "Mon";
var job = "image";

const endpoint = `https://example.com/${folder}/${orderNumber}-${refNum}-${job}.jpg`;
const href = `<a href="${endpoint}" target="_blank">${endpoint}</a>`;

document.querySelector('.link').insertAdjacentHTML('beforeend', href);

<p style="margin: 0;">If that button will not work, copy and paste the following link in your browser:</p>
<p class="link" style="margin: 0;"></p>

Answer 3

Вы можете попробовать это:

<p style="margin: 0;">
   <a id="myLink" href='' target="_blank">""</a>
</p>

 <script type="text/javascript">
     var folder = "orders";
     var orderNumber = "589";
     var refNum = "Mon";
     var job = "image";

     var myLink = document.getElementById("myLink");
     myLink.href = "https://example.com/" + folder 
              + "/" + orderNumber + "-" + refNum + "-" + job + ".jpg";

     myLink.innerHTML = myLink.href;
 <script>

Шаблонирование - это путь, если вы хотите, чтобы он был аккуратным и общим. В противном случае вы можете попробовать этот старый добрый способ JS.