자바스크립트가 문자 다루는 신기한 방법 (Template literals)

Javascript

by 모모87 2021. 8. 23. 17:18

참조: 코딩애플

<!DOCTYPE html>
<html lang="kr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var 변수 = `손흥민`;//backquot 문자열 장점 1.엔터키 가능 
        var 문자 = `안녕하세요 저는 ${변수} 입니다.`; //2.중간중간에 변수 넣기가 쉬움
        var 템플릿 = `<div>${문자}</div>`; //2.중간중간에 변수 넣기가 쉬움
        console.log(템플릿)

        function 해체분석기(문자들, 변수들1, 변수들2) {
            console.log(문자들)
            console.log(변수들1)
            console.log(변수들2)
        }
        해체분석기`안녕하세요 저는 ${변수} 입니다. ${변수}`//3.단어순서를 변경/제거/변수 위치 쉽게 옮김/ tagged literal 문자를 해체분석할 수 있음

        //tagged literal 순서 변경예제
        function 해체분석기2(문자들2, 변수들3, 변수들4) {
            console.log(문자들2[1] + 변수들3 + 문자들2[0])
        }
        해체분석기2`안녕하세요 저는 ${변수} 입니다. ${변수}`;


        // 문제1
        var pants = 20;
        var socks = 100;
        해체분석기3`바지:${pants}  양말:${socks}`;
        function 해체분석기3(종류, 바지수, 양말수) {
            console.log(종류[1] + 양말수 + 종류[0] + 바지수);
        }
        // 문제2
        해체분석기4`바지:${pants}  양말:${socks}`;
        function 해체분석기4(종류, 바지수, 양말수) {
            if (바지수 == 0) {
                console.log('바지 안팔아요.')
            } else {
                console.log(`바지 재고${pants}개 있어요.`);
            }
        }

    </script>
</body>

</html>

'Javascript' 카테고리의 다른 글

자바스크립트 함수 default parameter/arguments (0)	2021.08.24
Sread Operator / 펼침연산자 활용 (0)	2021.08.24
물리엔진 js Matter.js (0)	2021.08.13
jquery 모달 바깥영역 클릭시 닫기 (0)	2021.06.17
16_ 두더지잡기 (0)	2021.04.26