[JavaScript] String 문자열 출력하기 - Template Literals

 

JavaScript에서 단순히 문자열들을 '+' 연산자를 통해 붙이는 방식은

변수와 섞여있는 결과물의 경우 굉장히 가독성이 떨어졌습니다.

ES2015부터 Template Literals라 불리는 String 출력방법을 다룹니다.

(물론, IE에서는 사용하실 수 없습니다..!)

1. 기본적인 사용법 - 백틱( ` )

String 표현을 Sinlge Quote ( " ) 이나 Double Quote ( ' )으로 감쌌던 것 처럼

물결표 위치에 있는 백틱 ( ` ) 기호로 감싸줍니다.

변수의 경우 ${ 변수명 } 형태로 문자열 안에 포함시킵니다.

const fruit     = "Apple";
const cost      = "1500";

let str1        = "This Fruit(" + fruit + ")" + " is " + cost + " won";    
let good_str1   = `This Fruit(${fruit}) is ${cost} won`;

console.log(str1);
console.log(good_str1);

* 출력결과

2. 개행문자 표현

"\n"과 같은 개행문자에 대해 Template Literals도 동일하게 동작합니다.

다만, 문자열 내에서 개행문자가 아닌 줄바꿈을 하는 경우도 출력되는 문자열에 적용됩니다.

let str2 = "This week has been sooooo ~~~ \nboring";
let good_str2 = `This week has been sooooo ~~~
boring`;

console.log(str2);
console.log(good_str2);

* 출력결과

3. Tagged Templates

Template Literals를 함수로 파싱하는 방법입니다.

price가 2000이 안되는 경우 "Sale...!!!" 문자열을 추가하는 예제입니다.

console.log( TagTemplate`This Fruit(${fruit}) is ${cost} won` );

function TagTemplate(strings, fruit, price, category)
{
	let str0 = strings[0];
	let str1 = strings[1];
	let str2 = strings[2];

	if(price < 2000)
	{
		return str0 + fruit + str1 + price + str2 + "(Sale...!!!)";
	}

	return str0 + fruit + str1 + price + str2;
}

# 인자

• strings : 리터럴 문자열의 변수 위치를 기준으로 분리된 문자열 배열입니다.
• fruit : 리터럴 문자열의 첫 번째 변수값이 매칭되는 인자입니다.
• price : 리터럴 문자열의 두 번째 변수값이 매칭되는 인자입니다.  
• category: 리터럴 문자열의 세 번째 변수값이 매칭되는 인자입니다. (본 예제에서는 넘어오는 값이 없으므로 undefined 처리됩니다.)

주의할 점은 예제에 정의한 함수인 "TagTemplate"을 함수호출처럼 TagTemplate()하는 것이 아닌 백틱( ` )으로 TagTemplate ` { String } ` 호출해야 한다는 것입니다.

* 출력결과