javascript Template literals (Template strings) 문자열 병합

javascript Template literals (Template strings) 문자열 병합

 

이번 포스팅에서는 javascript에서 문자열을 병합하는 방법을 알아보겠습니다.

 

ECMA6 이전에서 문자열을 병합 할때는 + 연산자를 사용하거나

 

const firstName = "geon";
const lastName = "lee"
console.log("My name is "+firstName+" "+lastName+".");

 

String.prototype.concat() 함수를 사용했었습니다.

 

const firstName = "geon";
const lastName = "lee"
console.log("My name is ".concat(firstName, " ", lastName, "."));

 

이런 방법들은 익숙해져서 편하게 느껴질 수도 있지만, 가독성이 떨어지고 신경써야될 연산자도 많습니다.

 

ECMA6에서는 이보다 가독성이 좋게 병합할 수 있는 방법을 제공하는데요.

이것이 Template literals (Template strings) 입니다. 

이 방법은 키보드 숫자키 왼쪽에 있는 ` 를 사용하게 되는데요,

일반 문자열이 아닌 javascript 변수는 ${} 를 사용하여 접근 할 수 있습니다. 

 

const firstName = "geon";
const lastName = "lee"
console.log(`My name is ${firstName} ${lastName}.`);

 

결과는 위 3가지 모두 "My name is geon lee." 가 출력됩니다.

 

Template literals 방식은 위의 2가지 방식보다 가독성이 좋으니 적극 활용하도록 합시다!

IE 에서는 지원하지 않으니 주의하세요!

더 자세한 내용은 아래 MDN을 참고하세요.

 

Link : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Template literals (Template strings) - JavaScript | MDN