본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT

[Javascript] 템플릿 리터럴

템플릿 리터럴

템플릿 리터럴은 백틱(backtick) 문자 `를 사용하여 새로운 문자열을 삽입할 수 있는 기능을 제공합니다.


템플릿 리터럴

템플릿 리터럴은 백틱(backtick) 문자 `를 사용하여 새로운 문자열을 삽입할 수 있는 기능을 제공합니다. 이를 문자열 인터폴레이션(String Interpolation)이라 합니다.

`${ … }`

Sample1

템플릿 리터럴을 사용하는 기본 예제입니다.

결과
1. 함수가 실행되었습니다.
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단계 입니다.
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>

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기