JS 템플릿 리터럴

JavaScript

ES6 = ECMA Script 6 = 2015년 6월 기준으로 새로이 자바스크립트가 업데이트된 버전

  • (var => let, const 변수명(상수 + 배열 또는 객체의 추가 및 삭제) / ES7에서 class + 생성자라는 인자값을 도입)
  • 객체라는 개념이 넓어짐과 동시에 명확해짐
  • 콜백지옥을 막기 위해서 promise() 함수 ~ then

템플릿 리터럴(``)

  • JSON Formatter

ES5

1
2
3
4
5
6
7
8
9
10
11
12
var string1 = "안녕하세요";
var string2 = "반갑습니다";
var greeting1 = string1 + ", " + string2;
console.log(greeting1);

var product1 = {
    name : "곰인형",
    price : "8,000원"
}

var message1 = "상품 " + product1.name + "의 가격은 " + product1.price + " 입니다.";
console.log(message1);
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
// 게임 캐릭터 구성
var hero = {
    shape : "hero.jpg",
    name : "토마토재배자",
    cloth : "낡은 가죽옷",
    device : "호미",
    level : 1,
    hp : 100,
    ep : 0,

    running : function() {
        return "휘리릭~~";
    },
    action : function() {
        return "빠숑~~";
    }
}

document.write("<img src='./img/"+ hero.shape +"'> <br>");
document.write("나의 캐릭터 이름 : " + hero.name + "<br>");
document.write("나의 현재 레벨 : " + hero.level + "<br>");

document.write("게임이 시작되었습니다. 나는 " + hero.running() + " 달리고 있습니다.<br>");
document.write("나의 캐릭터 " + hero.name + "이(가) " + hero.device + "로 휘두르는 소리 " + hero.action() + "<br>");

document.write("1단계 끝판왕을 " + hero.device + "로 물리쳤습니다!<br>");
hero.level++;
document.write("나의 현재 레벨 : " + hero.level + "<br>");

// 기존 경험치 (ep)에서 50을 올려주고, 기존 체력(hp)에서 100을 올려준다.
hero.ep += 50;
hero.hp += 100;

document.write("나의 현재 체력 : " + hero.hp + "<br>");
document.write("나의 현재 경험치 : " + hero.ep + "<br>");

var multiLine1 = "문자열1번\n문자열2번";
console.log(multiLine1); // 데이터 상에서 엔터처럼 사용

var multiLine2 = "문자열1번<br>문자열2번";
console.log(multiLine2); // html 상에서 엔터처럼 사용
  • 뺄 때는 진짜 빠짐. 더할 때는 문자열로 변형됨.
  • 괄호를 넣어 먼저 연산하게 함.
  • 문자열 + 숫자 = 문자열
1
2
3
4
5
var value1 = 1;
var value2 = 2;
var result1 = "구입한 총 수량은" + (value1 + value2) + "개 입니다.";
console.log(value1);
console.log(result1);
1
2
3
var bool1 = false; // 10>12
var bool_result1 = "논리형 값은 " + (bool1 ? "참" : "거짓") + " 입니다.";
console.log(bool_result1);

ES6

  • 템플릿 리터럴 사용. 템플릿 리터럴에는 $를 사용하여 변수 또는 식을 포함할 수 있음.
1
2
3
4
5
6
7
8
9
10
11
12
var string3 = "안녕하세요";
var string4 = "반갑습니다";
var greeting2 = `${string3}, ${string4}`;
console.log(greeting2);

var product2 = {
    name : "곰인형",
    price : "8,000원"
}

var message2 = `상품 ${product2.name}의 가격은 ${product2.price}입니다.`;
console.log(message2);
1
2
3
4
5
6
var multiLine3 = `문자열1번
문자열2번`;
console.log(multiLine3); // 데이터 상에서 엔터처럼 사용

var multiLine4 = `문자열1번<br>문자열2번`;
console.log(multiLine4); // html 상에서 엔터처럼 사용
1
2
3
4
var value3 = 1;
var value4 = 2;
var result2 = `구입한 총 수량은 ${value1 + value2}개 입니다.`;
console.log(result2);
1
2
3
var bool2 = false; // 10>12
var bool_result2 = `논리형 값은 ${(bool1 ? "참" : "거짓")} 입니다.`;
console.log(bool_result2);

실습문제 - ES5

  • alt + shift + 화살표 하면 복사됨
1
2
3
4
5
6
7
8
9
10
11
var cart1 = {
    present : "장미 한 묶음",
    price : 15000
}

var totalPrice1 = function() {
    return cart1.price + "원";
}

var myCart1 = "장바구니에 " + cart1.present + "이(가) 담겨있습니다. 가격은 " + totalPrice1() + "입니다.";
console.log(myCart1);

실습문제 - ES6

  • 조건 “+”라는 병합 연산자를 모두 제거하여 적용할 것
1
2
3
4
5
6
7
8
9
10
11
var cart2 = {
    present : "장미 한 묶음",
    price : 15000
}

var totalPrice2 = function() {
    return `${cart1.price}원`;
}

var myCart2 = `장바구니에 ${cart2.present}이(가) 담겨있습니다. 가격은 ${totalPrice2()}입니다.`;
console.log(myCart2);

REFERENCE
뷰(Vue.js) 프로그래밍 과정 _ 하이미디어 아카데미

  • © 2020-2025 404 Not Found
  • Powered by Hexo Theme Ayer