Language/JavaScript

[Javascript] 백틱(`) 과 template literal

gangintheremark 2023. 7. 12. 15:49
728x90

템플릿 리터럴 (Template literal)

템플릿 리터럴이란 ` (백틱)으로 감싸진 문자열 리터럴로서 ES6부터 템플릿 리터럴이라 부르게 되었다.

백틱  ` 

문자열을 표현할 때 일반적으로 값을 " "혹은 ' ' (작은 따옴표)를 사용하고, 변수를 문자열에 포함 시키려고 한다면 문자열을 열고 닫은 후 더해주는 형식( + ) 으로 작성한다.

 

 ` (백틱)은 ${변수}를 사용해서 문자열과 변수를 적절히 같이 사용할 수 있다.

const num1 = 10;
const num2 = 20;

console.log(num1 + ' + ' + num2 + ' = ' + (num1+num2) +  " 입니다."); // 백틱 적용X 
console.log(`${num1} + ${num2} = ${num1 + num2} 입니다.`); // 백틱 적용
  • 줄바꿈을 위해 개행문자 \n 을 사용하지 않아도 된다 → 자동 줄바꿈
  • html 태그 같은 특정 형식을 가진 문자열을 가독성이 높도록 표현 가능하다

# innerHTML을 이용하여 백틱 내 작성한 html 형식 추가 

<head>
 <script>         
 function btn_change() {
  var username = document.querySelector("#username").value;
  var age = document.querySelector("#age").value;

  var table = `
              <table>
                <tr>
                  <th> 이름 </th>
                  <th> 나이 </th>
                </tr>
                <tr>
                  <th> ${username} </th>
                  <th> ${age} </th>
                </tr>
              </table>
              `;

            document.querySelector("#xxx").innerHTML = table;
 }
  </script>
</head>
<body>
  이름 : <input type="text" id ="username"> <br>
  나이 : <input type="text" id ="age">

  <p id="xxx"><span>Hello</span></p>
  <button onclick="btn_change()">출력</button>
</body>

코드 실행결과

728x90