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은 백틱을 사용해서 읽기도 좋고 이해하기도 좋은 코드를 만들어 준다. 심지어 백틱을 이용해서 다양한 기능 구현이 가능하니,,,, 👍🏻 👍🏻 👍🏻
하루하루 내가 알고 있는 지식이 늘어감을 보니 기분이 너무 좋다. 앞으로도 더 열심히 블로그 작성에 매진해야겠다. 🤜🏻 파이팅!!!
