(8) JavaScript - 자료형 / 템플릿 문자열 (Template String)

    let year = 2023
    let month = 9
    let day = 20
    console.log('오늘은 ' + year + '년 ' + month + '월 ' + day + '일');

 

▲ 변수를 활용해서 문장을 만들고 있는데, 변수들이 숫자 값을 가지고 있지만

더하기는 한쪽만 문자열이어도 두 값을 모두 문자열로 변환 한 다음에 문자열 연결이 된다.

실행 해보면 한 문장으로 문자열이 잘 연결된 것을 볼 수 있다.

 

위 작성한 코드를 가지고 템플릿 문자열로 변환해보자

 

템플릿 문자열

템플릿이란 일정한 틀, 형식이라는 의미를 가지고 있으며 특별한 형식을 가진 문자열을 템플릿 문자열 이라고 한다.

 

▼ 템플릿 문자열은 ( ` ` ) 백틱을 사용하며 좀 더 가독성있게, 코드작성을 편리하게 변화 시킬 수있다.

 

    let year = 2023
    let month = 9
    let day = 20
    console.log('오늘은 ' + year + '년 ' + month + '월 ' + day + '일');
    console.log(`오늘은 2023년 9월 20일`)

 

 

이 상태에서 2023은 year,  9은 month, 20은 day가 될텐데

백택으로 문자열을 만들게 되면 안쪽에서 달러 기호($)와 중괄화{ }를 열고 닫으면된다.

 

 

이 중괄호 안에는 변수를 넣을 수도 있고, 연산식을 쓸 수도 있고 마음대로 값을 채워 넣을 수 있는데,

자동으로 주변에 이 문자와 연결이 돼서 더하기 기호를 생각 할 수있는 것이다.

 

이것이 템플릿 문자열이 가지고 있는 하나의 형식이라고 할 수있다.

console.log(`오늘은 ${year}년 ${month}월 ${day}일`);

 

확실히 템플릿 문자열을 사용하는 쪽이 조금 더 읽기가 편하고 코드를 작성하기 쉽다는 것을 알 수있다.

 

템플릿 문자열을 한번 응용해보자면..

---

    let myNumber = 3
    function getTwice(x) {
        return x * 2;
    }
    console.log(myNumber + '의 두 배는' + getTwice(myNumber) + '입니다.');

 

숫자값을 가지고있는 myNumber 변수와 

파라미터 x의 두 배를 리턴해주는 getTwice 함수가 있을때,

템플릿 문자열을 사용하면 변수 뿐만 아니라 리턴 값이 있는 함수를 바로 활용 할 수도 있다.

한번 템플릿 문자열 방식으로 수정해보면..

    let myNumber = 3
    function getTwice(x) {
        return x * 2;
    }
    console.log(myNumber + '의 두 배는' + getTwice(myNumber) + '입니다.');
    console.log(`${myNumber}의 두배는 ${getTwice(myNumber)}입니다.`);

 

좀 더 해석해보자면 myNumber는 숫자 3을 가지고 있으니 ${myNumber} 부분은 3이 된다.

그러고 나서 함수를 호출할 때도 myNumber 변수를 쓰고

그러면 3이 파라미터 x에 전달이 돼서 3 * 2를 리턴하니까 ${getTwice(myNumber)}는 6이 된다.

 

 

이렇게 문자열을 연결할 때 더하기 기호를 쓸 수도 있지만

문자열 템플릿을 활용하면 훨씬 더 쉽고 편하게 작성 할 수있다.

 

---

★ GitHub 주소 (템플릿 문자열)

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/Basic/5-%EC%9E%90%EB%A3%8C%ED%98%95/7.TemplateString.html

JavaScript_soloPlay/Basic/5-자료형/7.TemplateString.html at main · SeopE9611/JavaScript_soloPlay

 

★ notion 주소 (템플릿 문자열 문제)

https://www.notion.so/107e9530b3e18089a988f7576e3701b3?pvs=4

최종임금 구하기 | Notion