템플릿 리터럴로 여러 줄 문자열을 만드는 방법

템플릿 리터럴의 등장으로 마침내 여러 줄 문자열을 생성하는 것이 매우 쉬워졌습니다. 이전에는 \n 또는 별도의 문자열 연결을 사용해야 했기 때문에 복잡하고 읽기 어려웠습니다. 마지막으로 이제 더 쉬워졌습니다. 승리를 위한 ES6 🙌

// Old way
const multiLine1 = "1️⃣first \n2️⃣second";

// ✅ ES6 way
const multiLine2 = `1️⃣first
2️⃣second`;

/* RESULT
1️⃣first
2️⃣second
*/

여러 줄과 한 줄 문자열

"Multi-Line"이라고 말하면 문자열의 출력이 여러 줄에 걸쳐 있음을 의미합니다. 예를 들어 Iconsole.log 변수가 있으면 다음과 같이 생성됩니다.

// Multi-Line

1️⃣first
2️⃣second

다음은 "Single-Line"출력입니다.

// Single-Line

1️⃣first 2️⃣second

내가 이것을 강조하는 이유는 JavaScript에 문자열을 생성하는 다른 방법이 있기 때문입니다. 하지만 조심하세요, 그들은 실제로 진정한 "Multi-Line"출력을 생성하지 않습니다 😱

전. 사용 +

const notTrueMultiLine = '1️⃣first' +
'2️⃣second' +
'3️⃣three';

console.log(notTrueMultiLine);
// 1️⃣first2️⃣second3️⃣three

전. 사용 \

const notTrueMultiLine = "\
1️⃣first \
2️⃣second \
3️⃣three";

console.log(notTrueMultiLine);
// 1️⃣first2️⃣second3️⃣three

하지만 코드에 여러 줄로 표시될 수 있습니다. 그러나 출력될 때 실제로는 한 줄입니다. 진정한 여러 줄 출력을 생성하려면 템플릿 리터럴 또는 \n 를 사용해야 합니다. JavaScript를 처음 배울 때 이 실수를 한 것을 기억하기 때문에 이것을 지적하고 싶었습니다 😖

템플릿 리터럴의 공백

따라서 템플릿 리터럴은 공백과 모든 것을 표시되는 그대로 출력합니다! 그렇기 때문에 공백이나 줄에 주의하십시오.

const blankSpace = `
first
    second
  third

`;

다음은 출력입니다. 공백을 점 ⚪️으로 표시하고 줄바꿈을 사각형 ◻️으로 표시했습니다.

□
first
····second
··third
□
□

템플릿 리터럴을 사용한 HTML 템플릿

이것은 템플릿 리터럴 다중 문자열 기능을 사용하는 가장 좋아하는 사용 사례입니다. 가독성이 뛰어나고 HTML 마크업을 쉽게 렌더링할 수 있습니다. 이전에 이 작업을 수행하는 유일한 방법은 Handlebars.js 과 같은 템플릿 시스템을 사용하는 것임을 기억합니다. 글쎄, 더 이상. 아무 것도 가져오지 않고 바닐라 JS만 사용하면 동일한 결과를 얻을 수 있습니다. 그것은 굉장! Anyhoo, 몇 가지 예를 살펴보겠습니다.

✅예. 템플릿 리터럴을 사용한 HTML 마크업

const HTMLmarkup = `
<article>
  <h1>Code Tidbits</h1>
</article>
`;

전. 이전 JavaScript를 사용한 HTML 마크업

const HTMLmarkup = "<article>" +
"<h1>Code Tidbits</h1>" + 
"</article>";

전. Handlebars.js를 사용한 HTML 마크업

<script id="entry-template" type="text/x-handlebars-template">
  <article>
    <h1>Code Tidbits</h1>
  </article>
</script>

<!-- also need to import handlebars -->

자원

MDN Web Docs: Template Literals

Stack Overflow: Creating multiline strings in JavaScript

CSS Tricks: Multiline String Variables in JavaScript

DWB: Multi-Line JavaScript Strings

Multiline strings in ES6 JavaScript

Github Gist: Multiline

Easy Creation of HTML with JavaScript’s Template Strings

읽어주셔서 감사합니다 ❤
안녕하세요! | | Facebook | Medium | Blog