JS / onload / querySelector / одинарные косые кавычки / ${…}

Есть функция, которая заменяет дивы на картинки:

(function replaceImg(){
  var divs = document.body.querySelectorAll('.img-replace');
  for (var i = 0; i < divs.length; i++) {
      var img = document.createElement('img');
      img.src = divs[i].getAttribute('data-src');
      img.onload = function(){
          document.body.replaceChild(this, document.body.querySelector(`[data-src="${this.src}"]`));
      };
      img.onerror = function(){};
  };
}());

она работает, как и должна...

1) меня интересует querySelector, а именно то, почему в скобках пишутся одинарные косые кавычки. Я их встречаю впервые. Если эти косые одинарные кавычки `` заменить обычными одинарными ' ' - то получим ошибку - Uncaught TypeError: Failed to execute 'replaceChild' on 'Node': parameter 2 is not of type 'Node'. Почему нужно писать именно их? И в каких случаях? Только если документ уже загружен, и нужно достать что-то из построенного DOMa?

img.onload = function(){
 document.body.replaceChild(this, document.body.querySelector(`[data-src="${this.src}"]`));
};

2) также интересует вопрос насчёт этого синтаксиса - ${this.src} В каких случаях используется доллар и фигурные скобки? Зависит ли это от наличия this или нет?