Javascript - Template Literals

 

인프런 자바스크립트 입문 수업을 듣고 중요한 내용을 정리했습니다.
개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.

 

Template Literals

 

• Template Literals 이란?

Template Literals는 문자열의 결합을 간소화시켜주는 기능이다.

<기본 개념>

//Template Literals을 사용하지 않는 경우 - 일반적인 함수 구조

function hello(name){

	console.log("Hello " + name + ". Welcome!"); 
    
 }

hello("James");

// 결과 : Hello James. Welcome!



//Template Literals을 사용하는 경우 - 문자열 결합의 편리함

function hello2(name){

	console.log(`Hello ${name}. Welcome!`);

 }

hello2("Harden");

// 결과 : Hello Harden. Welcome!

//위의 예시처럼 문자열을 묶을 때 "",'', +, 이러한 기호들을 결합하지 않고,
//간단하게 묶을 수 있는 기능이다.


function hello3(name){

	var name2 = "John"
	console.log(`Hello ${name}. Welcome! ${name2}`);
    
 }

hello3("AD");

// 결과 : Hello AD. Welcome! John

//추가한 변수(John)를 언제든지 문자열로 손쉽게 묶을 수가 있다.