[Javascript] replace(), parseInt(), toString()문자열을 정수로 변환, 정수를 문자열로 변환 🧐

 

메뉴를 주문내역에 추가하는 것을 구현하는 도중

가격이 6,200원 6,000원과 같이 타입이 문자열이기 때문에

어떻게 하면 정수로 변환하여 더할 것이며 천자리 바다 콤마(,) 가 찍힐 수 있도록 하는 것에 대해 고민했다.

---

해결 순서

1. 6,200원(문자열 string) 을 정수로 변환 / 6,200원(string)->6,200(number)

2. 6200 (number) + 6000 (number)... + 총 금액(number) 계산

3. 총 금액 12200 (number)  을 12,200 원 (string) 으로 변환

---

 

1. 문자열을 정수로 변환

- 정수로 변환하기 전에는 price, price2 는 string 타입인 것을 확인 할 수 있다.

  <script>
    let price = "6,200원";
    let price2 = "6,000원"
    console.log("메뉴1의 가격:" ,price);
    console.log("메뉴2의 가격:" ,price2);
    console.log("메뉴1,2의 타입:", typeof(price));
  </script>

 

- 정수로 변환해서 출력해보니 6200 이 아닌 6 만 나오는 결과가 확인된다. 🥲 🥲 (콤마 , 라는 문자가 있기 때문)

    let priceNum = parseInt(price);
    console.log("정수로 변환 후:", priceNum);
    console.log(typeof(priceNum));

2.  문자열의 특정 패턴을 찾아 다른 값으로 교체하는 replace() 

replace(/[^0-9]/g, "")로 문자열에 숫자가 아닌 모든 문자를 제거

6,200원 -> 6200 으로 출력된 것을 확인할 수 있었다. 🤩

💡 아래 코드에서 두 번째 인자인 "10"은 10진수로 변환하라는 의미이다.

    let priceNum = parseInt(price.replace(/[^0-9]/g, ""), 10);
    console.log("메뉴1을 정수로 변환 후:", priceNum);
    console.log("메뉴1의 타입:", typeof(priceNum));

    let total = priceNum + priceNum2;
    console.log("메뉴1,2의 총 합계 금액 :", total);

3. 숫자를 문자열로 변환하는 toString()

다시 총 합계 금액을 문자 형식으로 표현하기 위해 toString() 함수와

숫자를 천 단위마다 콤마(,)를 추가하는 replace(/\B(?=(\d{3})+(?!\d))/g, ',') 함수를 사용했다. 🤩 🤩

💡 두 번째 인지인 콤마(,)는 천 단위마다 콤마(,)를 추가하라는 의미이다.

    let totalInt = (total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')) + ' 원';
    console.log(totalInt);
    console.log(typeof (totalInt));

 

---