Template Literals

hana1126·2022년 9월 28일
0

TIL

목록 보기
3/9
post-thumbnail

Template Literals이란?

Template Literals,,, 리터럴이라는 단어는 vsCode를 통해서 과제를 하다가 문자열에서 마지막 를 입력해 주지 않았을때 종결되지 않은 문자열 리터럴입니다.라는 오류메세지로 본적이 있다.
“문자열 리터럴”과 “템플릿 리터널”,,, 비슷하지만 다른,, 친숙하지만 색다른 “템플릿 리터럴”을 알아보자. 😃


정의

: MDN에서는 내장된 표현식을 허용하는 문자열 리터럴이 Template Literals이라고한다.
즉, javascript의 “문자열 리터럴” 중 하나인 “템플릿 리터럴”이였다!!!

Template Literals은 여러줄러 이루어진 문자열과 문자 보안기능을 가지고 있다.

사용 방법

  • 백틱(`)을 사용해서 문자열을 만들고 문자열 안에 변수를 입력하고 싶다면 플레이스홀더 ${}를 이용하여 ${변수이름}으로 입력하자!

    백틱 사용시 주의사항!!!!!
    백틱은 키보드의 왼쪽 탭키의 위쪽에 존재한다. 이때, 현재 설정된 언어의 상태가 중요하다.
    만약, 설정된 언어가 한글이라면 백틱의 키를 눌러도 ₩만 입력이 된다,, 이것은 백틱과 같은 역할을 하지않는다. (의도치는 않았지만 처음에 키를눌렀는데 ₩가 입력되길래 이것이 백틱인 줄 알았다.)
    따라서, 한영키를 눌러 언어를 영어로 설정을 하고 다시 백틱키를 누르게되면 정상적으로 백틱을 사용할 수 있다.😎
    만약 백틱 안에 백틱을 넣고 싶다면 백틱 앞에 역슬러쉬()를 입력하면 된다. → `\``

사용 예시

문자열과 변수를 출력할 때, Template Literals를 알기 이전

const name = "훈이"
const apple = 10
console.log(name+"는 사과를 "+apple+"개 샀습니다.")
// 출력결과
// 훈이은 사과를 10개 샀습니다

문자열과 변수를 출력할 때, Template Literals를 알게된 후

const name = "훈이"
const apple = 10
console.log(`${name}은 사과를 ${apple}개 샀습니다.`)
//'훈이은 사과를 10개 샀습니다.'

문자열을 입력하다가 개행이 필요한 경우, Template Literals를 알기 이전

console.log("여기서 개행
		     한번더 개행
             마지막으로 개행")
//ㄴ-> SyntaxError: Unterminated string constant.라는 오류 발생
        
console.log("여기서 개행\n한번더 개행\n마지막으로 개행")
//ㄴ-> 한줄로 입력하였지만 개행이되어 출력.
/* 결과
   여기서 개행
   한번더 개행
   마지막으로 개행
*/

문자열을 입력하다가 개행이 필요한 경우, Template Literals를 알게된 후

console.log(
        `여기서 개행
        한번더 개행
        마지막으로 개행`)
        
/* 결과
        여기서 줄바꿈
        한번더 줄바꿈
        마지막으로 줄바꿈
*/

Template Literals에서 더욱 발전된 형태의 Tagged templates!!

장점

  • 백틱태그를 사용하면 템프릿 리터럴을 함수로 피싱 할 수 있다.
  • 말로만 설명하면 이해가 어려워 mdn에 나와있는 예제를 참고하면 좋을 것같다!

Template Literals은 백틱을 사용해서 읽기도 좋고 이해하기도 좋은 코드를 만들어 준다. 심지어 백틱을 이용해서 다양한 기능 구현이 가능하니,,,, 👍🏻 👍🏻 👍🏻 

하루하루 내가 알고 있는 지식이 늘어감을 보니 기분이 너무 좋다. 앞으로도 더 열심히 블로그 작성에 매진해야겠다. 🤜🏻  파이팅!!!

profile
노션 블로그 아래 집모양 클릭해주세요. 신나는 백앤드 공부중~

0개의 댓글