Template Literal

일반적인 문자열에 변수를 추가하는 방법

var name = "doyoung";
var letter =
  "dear " +
  name +
  " sadasdasd dsfdasfhsdaf dfkhasdkfdahsf dsf, Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications." +
  name +
  name;
console.log(letter);

결과

dear doyoung sadasdasd dsfdasfhsdaf dfkhasdkfdahsf dsf, Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.doyoungdoyoung

 

출력에서 나타나지 않는 코드적인 줄넘김 방법

var name = "doyoung";
var letter =
  "dear " +
  name +
  " \
\
sadasdasd dsfdasfhsdaf dfkhasdkfdahsf dsf, Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications." +
  name +
  name;
console.log(letter);

결과

dear doyoung sadasdasd dsfdasfhsdaf dfkhasdkfdahsf dsf, Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.doyoungdoyoung

 

일반적인 줄넘김 방법

var name = "doyoung";
var letter =
  "dear " +
  name +
  "\n\nsadasdasd dsfdasfhsdaf dfkhasdkfdahsf dsf, Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications." +
  name +
  name;
console.log(letter);

결과

dear doyoung

sadasdasd dsfdasfhsdaf dfkhasdkfdahsf dsf, Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.doyoungdoyoung

 

Template Literal 방식

var name = "doyoung";
var letter = `dear ${name}

  sadasdasd dsfdasfhsdaf dfkhasdkfdahsf dsf, Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications. ${name}
  ${1 + 1}`;
console.log(letter);

결과

dear doyoung

  sadasdasd dsfdasfhsdaf dfkhasdkfdahsf dsf, Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications. doyoung
  2

 

Template Literal 방식으로 작성할 경우 일반적인 줄넘기이나 변수 추가에 대한 가독성 대폭 상승하는 이점이 있다.

또한 ${} 안에 변수나 값 자체를 넣을 수 있다.