템플릿 리터럴
템플릿 리터럴은 백틱(backtick) 문자 `를 사용하여 새로운 문자열을 삽입할 수 있는 기능을 제공합니다.
템플릿 리터럴
템플릿 리터럴은 백틱(backtick) 문자 `를 사용하여 새로운 문자열을 삽입할 수 있는 기능을 제공합니다. 이를 문자열 인터폴레이션(String Interpolation)이라 합니다.
`${ … }`
Sample1 
템플릿 리터럴을 사용하는 기본 예제입니다.
결과
1. 함수가 실행되었습니다.
2. 함수가 실행되었습니다.
3. 함수가 실행되었습니다.
4. 함수가 실행되었습니다.
2. 함수가 실행되었습니다.
3. 함수가 실행되었습니다.
4. 함수가 실행되었습니다.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>템플릿 리터럴(Template Literal)</title>
<script>
function func6(name){
document.write('1. '+ name +'가 실행되었습니다.<br>');
document.write(`2. ${name}가 실행되었습니다.<br>`);
}
func6("함수");
function func61(text1, text2){
document.write('3. '+ text1 + '가 ' + text2 + '되었습니다.<br>');
document.write(`4. ${text1}가 ${text2}되었습니다.<br>`);
}
func61("함수", "실행");
</script>
</head>
<body>
</body>
</html>
Sample2
배열과 템플릿 리터럴을 사용하는 기본 예제입니다.
결과
HTML은 1단계 입니다.
CSS은 2단계 입니다.
3단계은 3단계 입니다.
공부하는 단계는 총3단계 입니다.
CSS은 2단계 입니다.
3단계은 3단계 입니다.
공부하는 단계는 총3단계 입니다.
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트(Javasript)</title>
</head>
<body>
<script>
var book = [
{name: 'HTML', level: '1단계'},
{name: 'CSS', level: '2단계'},
{name: '3단계', level: '3단계'}
];
var list =
`<p>${book[0].name}은 ${book[0].level} 입니다.</p>
<p>${book[1].name}은 ${book[1].level} 입니다.</p>
<p>${book[2].name}은 ${book[2].level} 입니다.</p>`;
document.write(list);
document.write("<br>");
document.write(`공부하는 단계는 총${book.length}단계 입니다.`);
</script>
</body>
</html>
