{"componentChunkName":"component---src-templates-blog-post-js","path":"/javascript/es6-템플릿-문자열-template-string/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog","description":"웹·앱·AI 개발자 전병훈(bottlehs)의 기술 블로그. AI·LLM, JavaScript·Vue, Spring Boot, 알고리즘, 블록체인 실무 가이드를 다룹니다","siteUrl":"https://www.bottlehs.dev","author":{"name":"Jeon Byung Hun","summary":"개발을 즐기는 bottlehs - Engineer, MS, AI, FE, BE, OS, IOT, Blockchain, 설계, 테스트"},"social":{"github":"bottlehs","codepen":"bottlehs"}}},"markdownRemark":{"id":"a0fb2f0c-cac7-5075-aebd-6fde340bab74","excerpt":"ES6 템플릿 문자열 (template string) 템플릿 문자열(Template String…","html":"<p><img src=\"/assets/es6.png\" alt=\"ES6 템플릿 문자열 (template string)\" title=\"ES6 템플릿 문자열 (template string)\"></p>\n<p>템플릿 문자열(Template String)은 문자열을 생성하는 새롭게 도입된 리터럴이다. 문자열을 설정하기 위해 따옴표(`)를 사용한다. 기존에는 변수를 문자열 안에 삽입하기 위해 따옴표 사이에 그 변수를 넣어 합치는 작업이 필요했는데, 템플릿 문자열을 이용하면 이를 간단하게 만들 수 있다.</p>\n<p><strong>기존</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> a <span class=\"token operator\">=</span> <span class=\"token number\">10</span>\n<span class=\"token keyword\">var</span> b <span class=\"token operator\">=</span> <span class=\"token number\">20</span>\n<span class=\"token keyword\">var</span> str <span class=\"token operator\">=</span> a <span class=\"token operator\">+</span> <span class=\"token string\">\" 더하기\"</span> <span class=\"token operator\">+</span> b <span class=\"token operator\">+</span> <span class=\"token string\">\"은\"</span> <span class=\"token operator\">+</span> <span class=\"token punctuation\">(</span>a <span class=\"token operator\">+</span> b<span class=\"token punctuation\">)</span> <span class=\"token operator\">+</span> <span class=\"token string\">\"이다\"</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>str<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 10 더하기 20은 30이다</span></code></pre></div>\n<p>변수를 <code class=\"language-text\">$[표현식]</code> 형태로 역따옴표 안에 넣을 수 있고, 이는 함수로 전달되어 일반 문자열로 치환된다.</p>\n<p><strong>템플릿 문자열</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">let</span> a <span class=\"token operator\">=</span> <span class=\"token number\">10</span>\n<span class=\"token keyword\">let</span> b <span class=\"token operator\">=</span> <span class=\"token number\">20</span>\n<span class=\"token keyword\">let</span> str <span class=\"token operator\">=</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>a<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\"> 더하기 </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>b<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">은 </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>a <span class=\"token operator\">+</span> b<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\"> 이다</span><span class=\"token template-punctuation string\">`</span></span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>str<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 10 더하기 20은 30이다</span></code></pre></div>\n<p>그리고 여러 줄에 걸친 텍스트를 표현하는데도 템플릿 문자열을 활용한다. ES5에서는 개행문자인 <code class=\"language-text\">\\n</code>으로 줄바꿈을 했었다면, 템플릿 문자열은 이를 직관적으로 바꿔준다.</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">a\nb\nc</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\">// 출력</span>\na\nb\nc</code></pre></div>","tableOfContents":"","wordCount":{"words":78},"fields":{"slug":"/javascript/es6-템플릿-문자열-template-string/","image":"/assets/es6.png","faq":[]},"frontmatter":{"title":"ES6 템플릿 문자열 (template string)","date":"2020년 11월 17일","dateISO":"2020-11-17T18:07:36.947Z","updatedISO":null,"category":"javascript","description":"템플릿 문자열(Template String)은 문자열을 생성하는 새롭게 도입된 리터럴이다. 문자열을 설정하기 위해 따옴표(`)를 이용한다. 기존에는 변수를 문자열 안에 삽입하기 위해 따옴표 사이에 그 변수를 넣어 합치는 작업이 필요했는데, 템플릿문자열을 이용하면 이를 간단하게 만들 수 있다.","tags":["ES6","ECMAScript","템플릿 문자열","JavaScript"]}}},"pageContext":{"slug":"/javascript/es6-템플릿-문자열-template-string/","previous":{"fields":{"slug":"/javascript/es6-클래스-class/"},"frontmatter":{"title":"ES6 클래스 (Class)","tags":["ES6","Class","객체지향","Function","JavaScript"]}},"next":{"fields":{"slug":"/javascript/es6-디스트럭처링-destructuring/"},"frontmatter":{"title":"ES6 디스트럭처링(Destructuring)","tags":["ES6","디스트럭처링","Destructuring","JavaScript","ECMAScript6"]}}}},"staticQueryHashes":["213619243","3262363727"]}