[ES6] Template Literal 과 String Method

Template Literal

Template Literal 은 문자열과 변수가 합쳐진 것을 말합니다.

이번에는 Template Literal 의 개선된 사항에 대해서 알아보도록 하겠습니다.

 

다음 예시를 살펴봅시다.

const intro = (name="anonymous") => "My name is " + name;

console.log(intro("minsung"));
// My name is minsung

결과를 출력하기 위해서 문자열과 변수를 합쳐주는 부분이 문자와 변수가 많이질수록 가독성을 해칠 위험이 있습니다.

 

따라서 `(GRAVE ACCENT) 와 $, {} 를 사용해줍니다.

`` 로 묶인 부분은 string 으로 인식되고 ${ } 안은 변수로서 인식합니다.

const intro = (name="anonymous") => `My name is ${name}`;

console.log(intro("minsung"));
// My name is minsung

 

변수가 아닌 표현식도 사용이 가능합니다.

const calulateMoney = (count, price) => `the total price is ${count*price}`;

console.log(calulateMoney(5,1000));
// the total price is 5000

 

Template Literal 활용 - html

Template Literal 를 활용하면 자바스크립트 안에서 html 을 사용할 수 있습니다.

기존에는 자바스크립트를 통해서 html 을 넣기 위해서 다음과 같이 해주었습니다.

const wrapper = document.querySelector(".wrapper");

const appendName = () => {
    const div = document.createElement("div");
    const h1 = document.createElement("h1");
    div.className = "name_box";
    h1.className = "name";
    h1.append("minsung");
    div.append(h1);
    wrapper.append(div);
}

엘리멘트가 늘어날수록 코드는 점점 많아지고 가독성도 저하되게 됩니다.

 

직접적으로 html 코드를 자바스크립트 안에서 작성함으로서 가독성을 향상 시킬 수 있습니다.

const wrapper = document.querySelector(".wrapper");

const appendName = () => {
    const div = `
        <div class="name_box">
            <h1 class="name">
                minsung
            <h1>
        </div>
    `
    wrapper.innerHTML = div;
}

놀라운 점은 ', " 등은 enter 를 통한 줄바꿈을 고려하지 못하지만 ` 은 이러한 부분까지 그대로 적용됩니다.

 

또 다른 예시를 살펴보도록 합시다.

wrapper div 안에 fruitList 들을 li 태그로 넣어주는 과정입니다.

기존에 배웠던 내용들이 많이 녹아있습니다.

ES6 를 사용하지 않는다면 꽤나 복잡했을 코드를 아주 간결하게 표현해줍니다.

const wrapper = document.querySelector(".wrapper");

const fruitList = ["apple","banana","melon","strawberry"]

const fruitHtml = `
    <ul>
        ${fruitList.map(fruit => `<li>${fruit}</li>`).join("")}
    </ul>
`;

wrapper.innerHTML = fruitHtml;

 

Template Literal 활용 - 함수 호출

Template Literal 를 사용하면 함수를 호출할 수도 있습니다.

다음과 같이 한 줄의 string을 넘어줄 때는 문제가 안되지만 여러 줄을 넘겨주기 위해서는 " 은 부적합합니다.

const styled = css => console.log(css);

styled("border-radius: 10px;");
// border-radius: 10px;

 

이럴 때 Template Literal 를 사용할 수 있죠.

하지만 이 때는 특이하게도 () 를 사용하지 않습니다.

styled`
    border-radius: 10px;
    color: blue;
`;
// [ '\n    border-radius: 10px;\n    color: blue;\n' ]

 

String Method

ES6 에서 새롭게 도입된 string method 에 대해서 알아보도록 하겠습니다.

includes

Array.prototype.includes() 는 배열이 특정 요소를 포함하고 있는지 판별해줍니다.

const isLee = name => name.includes("lee");

console.log(isLee("minsung_kang")); // false
console.log(isLee("sungbin_lee"));  // true

 

repeat

String.prototype.repeat() 는 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환합니다.

const repeatStr = "123".repeat(3);

console.log(repeatStr);
// 123123123

 

startWith endWith

String.prototype.startsWith() 어떤 문자열이 특정 문자로 시작하는지 확인하여 결과를 true 혹은 false로 반환합니다.

const name = "minsung_kang";

console.log(name.startsWith("minsung")); // true