템플릿 문자열

템플릿 문자열

ES2015 문법에 새로운 문자열이 생겼습니다.
큰따옴표나 작은따옴표로 감싸는 기존 문자열과는 다르게 백틱(`)으로 감쌉니다(Tab키 위에 있습니다.).
특이한 점은 문자열 안에 변수를 넣을 수 있다는 것입니다.

다음은 기존 ES5 문법을 사용한 문자열입니다.

                    
                        var num1 = 1;
                        var num2 = 2;
                        var result = 3;
                        var string1 = num1 + ' 더하기 ' + num2 + ' 는 \'' + result + '\'';
                        console.log(string1);
                    
                

문자열 string1은 띄어쓰기와 변수, 더하기 기호 때문에 가독성이 좋지 않습니다.
또한, 작은 따옴표를 이스케이프하느라 코드가 지저분합니다.
ES2015 부터는 다음과 같이 사용할 수 있습니다.

                    
                        const num3 = 1;
                        const num4 = 2;
                        const result2 = 3;
                        const string2 = `${num3} 더하기 ${num4}는 '${result2}'`;
                        console.log(string2); // 1 더하기 2는 '3'
                    
                

훨씬 깔끔해졌습니다. ${변수} 형식으로 변수를 더하기 기호 없이 문자열에 넣을 수 있습니다.
기존 따옴표 대신 백틱을 사용하기 때문에 큰 따옴표나 작은 따옴표와 함께 사용할 수도 있습니다.