Angular

Eu escrevi esse código do jeito em que eu aprendi

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-segundo-componente',
  templateUrl: './segundo-componente.component.html',
  styleUrls: ['./segundo-componente.component.css']
})
export class SegundoComponenteComponent {

  nome = "João";
  dataNascimento = "2005/01/01";
  urlImagem = "/assets/nando.jpg";

  mostrarDataNascimento(){
    alert("Data Nascimento: ${this.dataNascimento})");
  }
}

porem ele ficou assim:

então resolvi fazer assim:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-segundo-componente',
  templateUrl: './segundo-componente.component.html',
  styleUrls: ['./segundo-componente.component.css']
})
export class SegundoComponenteComponent {

  nome = "João";
  dataNascimento = "2005/01/01";
  urlImagem = "/assets/nando.jpg";

  mostrarDataNascimento(){
    alert("Data Nascimento: )"+ ${this.dataNascimento});
  }
}

e ficou assim:

Porém, quando eu fiz assim:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-segundo-componente',
  templateUrl: './segundo-componente.component.html',
  styleUrls: ['./segundo-componente.component.css']
})
export class SegundoComponenteComponent {

  nome = "João";
  dataNascimento = "2005/01/01";
  urlImagem = "/assets/nando.jpg";

  mostrarDataNascimento(){
    alert("Data Nascimento: )"+ this.dataNascimento);
  }
}

Ele deu certo

Alguem me explica pq?