[JavaScript] ES6 Template Literals

해니·2022년 10월 10일

javascript ES6

목록 보기
1/3
post-thumbnail

🍫 서론

Node.js + javascript 기초 강의 수강 중, 새로 알게된 문법이 있어 정리하게 되었다. 보통 String literals 방식을 사용했는데 , 개행 문자를 따로 적지 않아도 되고 직관적이라 훨씬 좋은듯 !





🔍 Template Literals 개념

  • Backtick(`) 안의 템플릿에 변수를 주입시켜서 문자열을 만드는 방식
  • 여러줄로 이루어진 문자열의 표현과 문자의 치환을 쉽게 할 수 있는 기능을 제공
  • 런타임 시점에 일반 자바스크립트 문자열로 처리/변환됨





📕 문법

  • Backtick(`)이라는 문자 사이에 문자열 템플릿을 입력하고, 거기에 ${variable}처럼 변수를 주입시켜 문자열을 생성함
  • Backtick 안에서 개행을 하면 문자열에 개행 문자가(\n)가 추가됨
var name = 'yhaeni';
// String literals
var letter = 'Dear'+name'\n\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '+name+' Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa egoing qui officia deserunt mollit anim id est laborum. '+name;

// Template literals
var letter2 = `Dear ${name}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ${name} Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ${1+1} Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa egoing qui officia deserunt mollit anim id est laborum. ${name}`;
 
console.log(letter);





참고 자료
https://eblee-repo.tistory.com/38https://m.blog.naver.com/dktmrorl/221927256681
https://opentutorials.org/module/3549/21045

profile
💻 ⚾️ 🐻

0개의 댓글