템플릿 리터럴을 사용하여 문자열 만들기

ES6의 새로운 기능은 템플릿 리터럴입니다. 복잡한 문자열을 더 쉽게 만들 수 있는 특수한 유형의 문자열입니다.

템플릿 리터럴을 사용하면 여러 줄 문자열을 만들고 문자열 보간 기능을 사용하여 문자열을 만들 수 있습니다.

아래 코드를 고려해보자

const person = {
  name: "Randy Rivera",
  age: 24
};

const greeting = `Hello, my name is ${person.name}!
I am ${person.age} years old.`;

console.log(greeting);

콘솔에 Hello, my name is Randy Rivera! 문자열이 표시됩니다. 나는 24 살이다.

솔직히 말해서 이 코드에서 많은 일이 일어났습니다. 첫째, 이 예제는 따옴표(' 또는 ")가 아닌 역따옴표(`)를 사용하여 문자열을 래핑합니다. 둘째, 문자열은 코드와 출력 모두에서 여러 줄로 되어 있다는 점에 유의하십시오. 이렇게 하면 문자열 내에\n을 삽입할 필요가 없습니다. 위에서 사용된 ${variable} 구문은 자리 표시자입니다. 기본적으로 더 이상 + 연산자와 연결을 사용할 필요가 없습니다. 문자열에 변수를 추가하려면 템플릿 문자열에 변수를 놓고 $로 감싸면 됩니다. { }.

도전합시다:

백틱이 있는 템플릿 리터럴 구문을 사용하여 목록 요소(li) 문자열의 배열을 만듭니다. 각 목록 요소의 텍스트는 결과 개체의 failure 속성에 있는 배열 요소 중 하나여야 하며 값이 text-warning인 class 속성이 있어야 합니다. makeList 함수는 목록 항목 문자열의 배열을 반환해야 합니다. 반복자 메서드(모든 종류의 루프)를 사용하여 원하는 출력을 얻습니다(아래에 표시됨, 이 예에서는 이것으로 가자).
`

[
  '<li class="text-warning">no-var</li>',
  '<li class="text-warning">var-on-top</li>',
  '<li class="text-warning">linebreak</li>'
]




const result = {
 success: ["max-length", "no-amd", "prefer-arrow- 
 functions"],
 failure: ["no-var", "var-on-top", "linebreak"],
 skipped: ["no-extra-semi", "no-dup-keys"]
};




function makeList(arr) {
  const failureItems = [];
  for (let i = 0; i < arr.length; i++) {
    failureItems.push('<li class="text-warning">${arr[i]}</li>')
  }

  return failureItems;
}

const failuresList = makeList(result.failure);




console.log(failuresList); will display 
[ '<li class="text-warning">no-var</li>',
  '<li class="text-warning">var-on-top</li>',
  '<li class="text-warning">linebreak</li>' ]

`