단비의 코딩 공부 blog

[Vanilla JS]study 23일차 - Templete Literals 본문

javascript&jquery

[Vanilla JS]study 23일차 - Templete Literals

황굽달 2023. 4. 25. 14:24

1. 기본구문

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>templete literals</title>
    </head>
    <body>
        <script>
            //` : grave accent = back accent
            //JS : 템플릿 리터럴 = 템플릿 스트링 = back tics

            let text = `안녕하세요`;
           
            alert(text);
        </script>
    </body>
</html>

2. 내부 따옴표처리

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>templete literals</title>
    </head>
    <body>
        <script>
            //` : grave accent = back accent
            //JS : 템플릿 리터럴 = 템플릿 스트링 = back tics

            let text = `"안녕"하세요`;
           
            alert(text);
        </script>
    </body>
</html>

3. 여러줄 허용

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>templete literals</title>
    </head>
    <body>
        <script>
            //` : grave accent = back accent
            //JS : 템플릿 리터럴 = 템플릿 스트링 = back tics

            let text = `
                학교종이 땡땡떙<br>
                어서 모이자<br>
                선생님이 우리를 기다리신다
            `;

            document.write(text);
        </script>
    </body>
</html>

4. 문자열 보간

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>templete literals</title>
    </head>
    <body>
        <div id="box">

        </div>
        <script>
            //` : grave accent = back accent
            //JS : 템플릿 리터럴 = 템플릿 스트링 = back tics

            //${ } : 변수와 표현식을 문자열에 쉽게 삽입할 수 있는 방법을 제공

            let titleText = '웹 프론트엔드 언어'
            let langText = ['HTML','CSS','JAVASCRIPT'];

            const box = document.getElementById('box');

            let html = `<h2>${titleText}</h2>`;

            html += `<ul>`;

            //li는 반복
           
            for(let i of langText){
                html += `<li>${i}</li>`;
            }
           
            html += `</ul>`;

            box.innerHTML = html;
        </script>
    </body>
</html>

5. html태그 요소

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>templete literals</title>
    </head>
    <body>
        <script>
            //` : grave accent = back accent
            //JS : 템플릿 리터럴 = 템플릿 스트링 = back tics

            //${ } : 변수와 표현식을 문자열에 쉽게 삽입할 수 있는 방법을 제공

            let firstName = 'Tony';
            let lastName = 'stark';

            let text = `환영합니다. ${firstName} ${lastName}`;

            alert(text);

            let doller = 1329;
            let num = 5;

            let result = `환전한 금액 : ${ doller * num }원`;

            alert(result);
        </script>
    </body>
</html>
저작자표시

'javascript&jquery' 카테고리의 다른 글

[Vanilla JS]study 25일차 - 정규표현식  (0) 2023.05.03
[Vanilla JS]study 24일차 - 배열반복  (0) 2023.04.26
[Vanilla JS]study 22일차 - 에러  (1) 2023.04.17
[Vanilla JS]study 21일차 - Cookie  (0) 2023.04.14
[Vanilla JS]study 20일차 - 유튜브 iframe  (0) 2023.04.04
'javascript&jquery' Related Articles more