[Node.js 백엔드 기초] JavaScript 기초 - 템플릿 문자열

YUZAMIN
YUZAMIN
Hello, World! I'm YUZAMIN, a diligently endeavoring frontend developer 🐤💦
[Node.js 백엔드 기초] JavaScript 기초 - 템플릿 문자열

Summary

정리📑

템플릿 문자열

Code 💻

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Basic</title>
  </head>

  <body>
    <h1 id="title">JavaScript Basic6 - 템플릿 문자열</h1>

    제품 가격:
    <input type="text" id="productPrice" value="10000" />
    <br />
    배송비:
    <input type="text" id="deliveryFee" value="3000" />
    <br />
    카드 수수료:
    <input type="text" id="cardFee" value="500" />
    <br />
    총 결제 금액:
    <input type="text" id="totalPayment" />
    <br />

    <hr />

    <div id="payHistory"></div>

    <script>
      /*
            문자열과 변수의 조합
                - Case1: 전통적인 문자열과 변수를 조합할 시 '+' 사용
                - Case2: ECMA 템플릿 문자열 코딩 방식으로 문자열 변수 조합
        */
      var productPrice = document.getElementById('productPrice').value
      var deliveryFee = document.getElementById('deliveryFee').value
      var cardFee = document.getElementById('cardFee').value
      var totalPayment =
        Number(productPrice) + Number(deliveryFee) + Number(cardFee)

      document.getElementById('totalPayment').value = totalPayment

      var payHistory1 =
        '제품의 가격은 ' +
        productPrice +
        '원이고, 배송비는 ' +
        deliveryFee +
        '원이며, 카드 수수료는 ' +
        cardFee +
        '원입니다. 총 결제 금액은 ' +
        totalPayment +
        '원입니다.'
      console.log(payHistory1)

      var payHistory2 = `제품의 가격은 ${productPrice}원이고, 배송비는 ${deliveryFee}원이며, 카드 수수료는 ${cardFee}원이어서 총 결제 금액은 ${totalPayment}원입니다.`
      console.log(payHistory2)

      // div 태그에 결제 내역 출력
      document.getElementById('payHistory').innerText = payHistory2
    </script>
  </body>
</html>

결과 🚩