elesis's haunt

[JavaScript] 백틱(`) 본문

HTML, CSS, JavaScript

[JavaScript] 백틱(`)

elesis 2021. 3. 20. 08:38

템플릿 리터럴(Template Literal)이란?

자바스크립트에서 문자열을 입력하는 방식입니다.

ES6부터 새로 도입된 표기법에서 문자열 생성시 따옴표 대신 백틱(`)을 사용할 수 있습니다.

템플릿 리터럴의 기능

1. 줄바꿈

아래 코드 둘은 같은 결과값을 가집니다.

// 기존 방식

var str = "Hello! \n\t JavaScript!"; // 줄바꿈+탭
// 추가된 방식

var str = `
		Hello!
			JavaScript!
	  `;									

2. 표현식 삽입

아래 코드 둘은 같은 결과값을 가집니다.

// 기존 방식

const num1 = 10;
const num2 = 20;

console.log(num1 + ' + ' + num2 + ' = ' + (num1+num2) +  " 입니다.");
// 추가된 방식

const num1 = 10;
const num2 = 20;

console.log(`${num1} + ${num2} = ${num1+num2} 입니다.`);

※ 백틱이 추가된 버전에서 ${ }의 연산결과는 문자열로 자동 변환됩니다.

Comments