108. (javascript/자바스크립트) 문자열 템플릿을 사용해 데이터 포맷 형식 지정 실시 - $ 변수 지정

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : javascript

---

[소스코드]

​

    <!-- 내부 JS 지정 : 일반 -->
    <script>

        /*
        [JS 요약 설명]
        1. window.onload : 브라우저 로드 완료 상태를 나타냅니다
        2. Math 객체는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체입니다
        3. floor : x와 같거나 작은 수 중에서 가장 큰 정수 값 출력합니다 
        4. Math.random : 랜덤 정수값을 출력합니다 
        5. 문자열 템플릿 : 역따옴표(``) [pc 키보드 기준 [~] 물결표 특수문자 부분에 위치] 를 사용해서 데이터 포맷 형식을 지정합니다
        6. 참고 : 문자열 템플릿은 익스플로어에서는 지원하지 않습니다 (크롬, 엣지, 파이어폭스, 사파리, 오페라 지원)
        */


        /* [html 최초 로드 및 이벤트 상시 대기 실시] */
        window.onload = function() {
            console.log("");
            console.log("[window ready] : [start]");
            console.log("");

            // 이벤트 함수 호출 
            autoTextForm();
        };


        /* [이벤트 수행 부분] */                       
        function autoTextForm() {
            console.log("");
            console.log("[autoTextForm] : [start]");
            console.log(""); 

            // 초기 고정 변수 선언 및 랜덤 정수값을 출력할 변수 선언 실시 [1부터 10까지 범위]
            var name = "twok";
            var randomData = Math.floor(( Math.random() * 10 ) + 1);
            console.log("");
            console.log("[autoTextForm] : [randomData] : " + randomData);
            console.log("");

            // 문자열 템플릿 지정 실시 : 데이터 포맷 형식에 특정 변수 지정 실시 [반드시, 역따옴표 사용 필요]
            const dataFormat = `이름 = ${name} , 랜덤값 = ${randomData}`;
            console.log("");
            console.log("[autoTextForm] : [dataFormat] : " + dataFormat);
            console.log("");
        }; 
                
    </script>

---

[결과 출력]

​

---

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 브라우저 로드 완료 상태를 나타냅니다

2. Math 객체는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체입니다

3. floor : x와 같거나 작은 수 중에서 가장 큰 정수 값 출력합니다

4. Math.random : 랜덤 정수값을 출력합니다

5. 문자열 템플릿 : 역따옴표(``) [pc 키보드 기준 [~] 물결표 특수문자 부분에 위치] 를 사용해서 데이터 포맷 형식을 지정합니다

6. 참고 : 문자열 템플릿은 익스플로어에서는 지원하지 않습니다 (크롬, 엣지, 파이어폭스, 사파리, 오페라 지원)

*/

---