JS

[JS] Templete Literal : 백틱(``), 달러(${})

옝옹 2023. 1. 16. 23:59

Template Literal (템플릿 리터럴)

  • ES6부터 새로 도입된 문자열 표기법
  • 내장된 표현식을 허용하는 문자열 리터럴
  • 문자열 생성 시 따옴표 대신, 백틱(``)을 사용
var str = `Hello World!`;

console.log(str);
[출력결과]
Hello World!

템플릿 리터럴을 사용하는 이유

1. 줄바꿈(개행)

백틱(`)으로 템플릿 리터럴을 사용하면, 개행문자(' \n ') 없이도 줄바꿈 가능

var str = `
hello!
    world!
             JavaScript!
very good`;

console.log(str);

 

[출력결과]
hello!
    world!
             JavaScript!
very good

 

2. 표현식 삽입

  • ES6 이전의 따옴표 방식에서는, + 연산자를 이용
  • 백틱(` `)안에 달러기호${}를 사용하면 변수나 연산 등을 삽입 가능.
var year = 2023
var month = 1
var day = "화";

console.log(`오늘은 ${year}년 ${month}월 ${day}입니다.`);
[출력결과]
오늘은 2023년 1월 화입니다.