템플릿 리터럴

템플릿 리터럴

문자열 안에 데이터 표현식을 삽입할 수 있는 표현법이다.

템플릿 리터럴

• 백틱(`)을 이용한 표헌
• 백틱은 물결 키(~)를 shift 누르지 않고 누르면 입력 가능하다.
• 변수나 메소드 모두 템플릿 리터럴에 삽입될 수 있다.

기존문자열과 차이점	기존 문자열	템플릿 리터럴
차이점		문자열 안에 표현식을 삽입할 수 있다 = 문자열의 내용에 데이터 삽입 가능
		달러 사인($)과 플레이스 홀더({})를 기입

• 문자열 안에 달러 사인($)과 플레이스 홀더({})를 기입하고 그 안에 데이터를 기입하면 된다.
• 그 데이트는 문자열의 일부가 된다.

예시

입력 내용

아래 코드표: 변수이므로 값의 변경이 가능하다.

let lit = "따옴표"
console.log(lit);
str = `백틱 백틱`
console.log(lit);

콘솔 출력 결과

콘솔 출력 결과

템플릿 리터럴 예시

입력 내용

let number = 30;
let name = "kim";
console.log(
    `그의 이름은 ${name}; 나이는 ${number}`
)

출력 결과

템플릿 시터럴 출력 결과

템플릿 리터럴로 데이터를 삽입할 수 있는 데이터의 개수 제한은 없다.
안 넣어도 되고 많이 넣어도 된다.

• 다만 플레이스 홀더 안에 들어가는 것은 데이터여야 한다.
• 변수 대신 그냥 데이터를 넣어도 된다.

데이터를 넣은 예시

입력 내용

let number = 30;
let name = "kim";
console.log(
    `그의 이름은 ${name}, 나이는 ${40}`
)

출력 결과

데이터를 넣은 결과

prompt 메소드 예시

입력 내용

let name = prompt("당신의 이름은 무엇입니까")
console.log(
    `나의 이름은 ${name}이다.`
)

사용자 입력 내용

사용자 입력 내용

콘솔 출력 내용

콘솔 출력 내용