02-1 템플릿 문자열

2장에서는 리액트에 필요한 자바스크립트 ES6의 문법을 공부한다.

 

ES란 ECMAScript의 약자로, 자바스크립트의 표준 규격을 나타내는 용어다.
ES5는 2009년, ES6는 2015년에 출시되었다.

 

---

 

템플릿 문자열

 

문자열과 문자열, 또는 문자열과 변수를 연결하고 싶을 때, 기존 자바스크립트에서는 병합 연산자(+)를 사용했다. 이는 코드가 복잡해보인다는 단점이 있었다.

 

이를 보완하기 위해 ES6에서 도입한 템플릿 문자열은 작은따옴표(' ') 대신 백틱(`)으로 문자열을 표현하고, 특수 기호 $를 사용하여 변수 또는 식을 포함할 수 있다.

 

다음 두 코드를 비교해보면 템플릿 문자열을 적용한 코드가 더 간결하다.

 

var string1 = '안녕하세요';
var string2 = '반갑습니다';
var greeting = string1 + ' ' + string2;
var product = { name: '도서', price: '4200원' };
var message = '제품' + product.name + '의 가격은' + product.price + '입니다';
var multiLine = '문자열1\n문자열2';
var value1 = 1;
var value2 = 2;
var boolValue = false;
var operator1 = '곱셈값은 ' + (value1 * value2) + '입니다.';
var operator2 = '불리언값은 ' + (boolValue ? '참' : '거짓') + '입니다.';

var string1 = '안녕하세요';
var string2 = '반갑습니다';
var greeting = `${string1} ${string2}`;  // 백틱(`)으로 문자열 표현, $ 기호를 사용하여 변수를 포함
var product = { name: '도서', price: '4200원' };
var message = `제품 ${product.name}의 가격은 ${product.price}입니다`;
var multiLine = `문자열1
문자열2`;  // Enter 를 눌러 줄을 바꾸는 것도 허용하며, 이스케이프 시퀀스를 사용하지 않아도 됨
var value1 = 1;
var value2 = 2;
var boolValue = false;
var operator1 = `곱셈값은 ${value1 * value2}입니다.`;  // $ 기호를 사용하여 연산을 포함
var operator2 = `${boolValue ? '참' : '거짓'}입니다.`;