자바스크립트 기초 ep.4 - $ (달러) 기호를 이용한 템플릿 스트링(template string)

$ (달러) 기호는 자바스크립트에서 다양한 의미로 쓰이는 기호입니다. 그 중 템플릿 스트링(template string)으로 사용하는 방법을 알아보겠습니다. 템플릿 스트링은 변수를 포함하여 복잡해질 수 있는 문자열(string)을 직관적이고 단순하게 표기하는 방법입니다.

 

$ 달러 기호를 이용한 템플릿 스트링

템플릿 스트링은 백틱(`, 키보드상 물결표)을 이용하여 중괄호에 $ 기호를 붙여 변수명을 그대로 보여주는 방법입니다. 즉 문자열에 변수명을 포함하여 합칠 때 표현하는 표기방법 입니다.

 

• + 기호를 이용한 복잡한 문자열 표기 방법
• $ 달러 기호를 이용한 템플릿 스트링 표기 방법

 

 

+ 기호를 이용한 복잡한 문자열 표기 방법

문자열은 + 를 이용하여 문자열 뒤에 문자열을 붙여나갈 수 있습니다.

 

var name = "gildong";
var age = 18;

// + 기호를 이용한 문자열 합치기
console.log("이름은 " + name + "이고 "+ "나이는 " + age + "살 입니다.");

 

+ 기호로 합쳐진 문자열입니다. 결과는 아래와 같습니다.

 

+ 기호 문자열 합치기 결과

 

 

$ 달러 기호를 이용한 템플릿 스트링 표기 방법

템플릿 스트링은 인용 부호(쌍따옴표, 따옴표)를 이용한 문자열 표기방법이 아닌, 백틱( `, 물결표 와 같은 키)을 이용하는 방법입니다. 백틱을 이용한 문자열은 $ 기호와 {} 중괄호를 사용하여 직관적으로 문자열을 보여줍니다.

 

var name = "gildong";
var age = 18;

// 백틱 ` 와 $ 기호를 이용한 문자열
console.log(`이름은 ${name}이고 나이는 ${age}살 입니다.`);

 

${변수명} 을 사용함으로써 문자열의 가독성을 높일 수 있습니다. 

 

템플릿 스트링

 

중괄호에 들어가는 변수의 형태에 따라 연산도 가능합니다.

 

var name = "gildong";
var age = 18;

// {} 내 변수의 자료형에 따라 연산 가능
console.log(`이름은 ${name + "님"}이고 나이는 ${age + 10}살 입니다.`);

 

아래는 결과 입니다.

 

 

 

마무리

템플릿 스트링은 여러 문자열을 합쳐야 할 때 유용합니다. 간단하게 문자열을 구성할 때는 + 를 이용하면 되지만 복잡하게 구성할 경우 템플릿 스트링을 사용하여 가독성을 높여줍시다.

 

오늘도 행복한 코딩생활 되시기 바랍니다. 감사합니다.