[Learning JavaScript] 템플릿 문자열

템플릿 문자열

템플릿 문자열은 ES6 (ES2015)에서 문자열을 템플릿 처럼 쓸 수 있게 만든 기능입니다.

ES6 이전에는 문자열에 함수를 작성 할 때는 다음과 같이 작성 했습니다.

const porfile = {
 name : "chaser";
 job : "student"
}
let str = profile.name + "의 직업은 " + profile.job + "입니다.";

여러 변수를 합쳐 문자열을 만들려니 띄어쓰기도 고려해야하고, + 와 따옴표로 인해 종종 오타를 범할 수 있습니다.(경험담)

이를 템플릿 문자열을 사용 할 경우 다음과 같이 작성 할 수 있습니다.

const porfile = {
 name : "chaser";
 job : "student"
}
let str = `${profile.name}의 직업은 ${profile.job}입니다.`;

+와 따옴표만 사라졌는데 개인적으로는 코드의 가독성이 확실히 좋다 생각이 듭니다.

여러 줄 문자열

const multiline1 = "line1\nline2";
const multiline2 = `line1
line2
line3`;

//Error
const multiline3 = "line1\
line2";
                         //    multiline1       multiline2
console.log(multiline1)  // return line1     return line1 
console.log(multiline2)  //        line2            line2 
                                                 //                         line3 
console.log(multiline3)  // return line1line2

줄 바꿈 특수문자 (\n) 를 사용 할 경우와 백틱( ` )을 사용 하면 정상적으로 new line에 글을 작성 할 수 있습니다.
코드의 결과 문자열에 줄바꿈 문자가 들어가지만 , 원하지 않는 공백이 line2 와 line3에 들어 간 것을 확인 할 수 있습니다.

책에서는 여러 줄 문자열을 권하지 않습니다. 여러 줄 문자열을 쓰려면 코드를 읽기 쉽게 만드는 들여쓰기를 포기하거나, 결과 문자열에 원하지 않는 공백이 들어가거나 둘중 하나 입니다.

소스 코드에서 문자열을 여러 행에 나눠 써야 할 때 필자는 보통 문자열 병합을 사용합니다.

const multiline = "line1\n" + 
   "line2\n" +
   "line3";

숫자와 문자열

const result1 = 3 + '30'; // 3이 문자열 바뀝니다. return '330'
const result2 = 3 * '30'; // '30' 이 숫자로 바뀝니다 return 90

문자열 병합 ( + ) 을 사용 할 경우에는 앞의 숫자가 문자열로 변경이 되고 result1 의 값은 '330' 이 됩니다.
(Number → String) + (String)

곱셈 ( * ) 을 할 경우 뒤의 문자열이 숫자로 변경 되며 result2 의 값은 90이 됩니다.
(Number) * (String → Number)