[react,javascript] 템플릿 문자열을 사용해보자 (`${백틱}`)

문자열을 사용하려면 

 

이렇게 + 써줬어야 + 했다

 

`템플릿 문자열`이라고 간단한 기능이 있다

 

알아보자

 

---

기존 자바에서 사용 할 때

 

    let string1 = "ㅎㅇ요";
    let string2 = "ㅂㅇ요";
    let greeting = string1 + " " + string2;
    let product = { name: "도서", price: "1231원" };
    let message = "제품" + product.name + "의 가격" + product.price + "입니다";
    let multiLine = "줄바꿈을 \n 해보자";
    let value1 = 1;
    let value2 = 2;
    let boolValue = false;
    let operator1 = "곱하기" + value1 * value2 + "입니다";
    let operator2 = "불린값" + (boolValue ? "참" : "거짓") + "입니다";

다음과 같은 결과가 나온다

 

 

하지만 저 + 들과 "" 를 중간 중간 치기는 너무 불편하다 

 

백틱 ( ` ) 키보드숫자 1옆에 있는 친구를 활용 하자

 

 

변수를 표시 할 땐 ${변수} 를 사용하자

숫자 데이터 타입이라면 백틱 안에서 ${number * number2} 연산이 가능하다

    let string1 = "ㅎㅇ요";
    let string2 = "ㅂㅇ요";
    let greeting = `${string1} 그리고 ${string2}`;  // string 변수 사용
    let product = { name: "도서", price: "12312원" };
    let message = `제품 ${product.name}의 가격  ${product.price}임`; // 객체사용도 충분하다
    let multiLine = `엔터키  // 줄바꿈을 인식한다
    누르기`;
    let value1 = 1;
    let value2 = 1;
    let boolValue = false;
    let operator1 = `곱하기 ${value1 * value2}`; // 연산 가능 ${}안에서 
    let operator2 = `${boolValue ? "참" : "거짓"}`; // 삼항연산자도 가능하다

 

결과:  잘 나온다

 

 

react 는 html과 쓰니깐 줄바꿈 할 때 그냥<br />태그를 써주자

 

---

예제를 한번 보자

다음과 같은 코드를 템플릿 문자열로 바꿔 보자

let cart = { name: "도서", price: "13123" };
let getTotal = function (cart) {
  return cart.price + "원";
};

let myCart = "장바구니에 " + cart.name + "가 있고 총금액은 " + getTotal(cart) + "입니다";

 

3

 

2

 

1

 

let cart = { name: "도서", price: "13123" };
let getTotal = function (cart) {
  console.log(cart.price);
  return `${cart.price원}`;
};

let myCart = `장바구니에 ${cart.name}가 있고 총금액은 ${getTotal(cart)} 입니다`;

---

쓰다보니 이게 더 귀찮은것같기도 하고

 

또 새로운 걸 알았다

 

 

 

 

 

 

 

참고:`실리콘밸리개발방법으로배우는프로그래밍정석`