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
'Language > JavaScript' 카테고리의 다른 글
| [Javascript] AJAX란 무엇인가? (0) | 2023.07.12 |
|---|---|
| [Javascript] 사용자 정의 객체 JSON (0) | 2023.07.12 |
| [Javascript] DOM level 0 고전 이벤트 모델 & 인라인 이벤트 모델 (0) | 2023.07.12 |
| [Javascript] 이벤트와 이벤트 핸들러 (0) | 2023.07.12 |
| [Javascript] 문서 객체 모델 (DOM) (0) | 2023.07.11 |
