자바스크립트의 숫자 문자열의 동작은 난해할 수 있다. 자칫 사소한 실수가 뜻하지 않은 결과를 나타낼 수 있다. 숫자와 문자가 만나 연결되더라도 숫자끼리 만나면 계산이 된다. 하지만 더하기 연산자를 만나면 숫자형태이든 문자열이든 엄격하게 데이터 형태에 맞게 문자열 연결로써 동작한다.
자바스크립트 숫자 문자열의 동작 관계
javascript numeric strings
자바스크립트의 숫자형 데이터는 독특하다.
비록 문자열이라고 하더라도 숫자끼리 만나면 사칙연산이 가능하다.
하지만 예외적인 경우가 있다.
더하기 연산자를 만나면 다른 동작을 하기 때문이다.
이것은 자바스크립트의 숫자형 데이터가 문자열일 때와 숫자일 때의 동작에 영향을 미친다.
사소해 보일 수 있는 것이지만 이 동작 패턴 때문에 숫자연산에 고생하는 분들 계시다.
뭐, 그렇게 많지는 않다.
숫자 문자열
자바스크립트에서 숫자형태의 문자열은 2가지 동작을 한다.
사칙연산 같은 간단한 계산이 되기도 하지만, 문자열로써 결합도 가능하다.
일반 문자열이 아닌 숫자로 된 문자열의 연산방식은 다음과 같다.
- 숫자문자열 + 숫자문자열 = 숫자 계산
- 숫자문자열 + 일반문자열 = 문자열 연결
샘플코드
위의 내용에 대한 간단한 자바스크립트 예제를 만들어 본다.
크게 중요한 내용은 아닐 수 있지만 ERP 나 은행권 또는 웹페이지 상태에서 숫자계산이 있는 경우 참고하는 것이 좋다.
숫자끼리의 동작은 간혹 오류 아닌 오류를 나타낼 수도 있다.
숫자형태의 문자열 동작이 어떻게 되는지 눈으로 볼 필요는 있다.
<!DOCTYPE html>
<html>
<body>
<h2>자바스크립트 숫자형</h2>
<div id="cont">
<p id="ret1"></p>
<p id="ret2"></p>
<p id="ret3"></p>
<p id="ret4"></p>
<p id="ret5"></p>
<p id="ret6"></p>
<p id="ret7"></p>
</div>
<script>
console.log("----------");
let vNum1;
let vNum2;
let vResult;
vNum1 = 1000;
vResult = ( typeof(vNum1) + " , " + vNum1 );
console.log(vResult);
document.getElementById("ret1").innerHTML = vResult;
vNum2 = "1000";
vResult = ( typeof(vNum2) + " , " + vNum2 );
console.log(vResult);
document.getElementById("ret2").innerHTML = vResult;
vNum1 = "1000";
vNum2 = "1000";
vResult = vNum1 - vNum2;
vResult = ( typeof(vResult) + " , " + vResult );
console.log(vResult);
document.getElementById("ret3").innerHTML = vResult;
vNum1 = 1000;
vNum2 = "1000";
vResult = vNum1 - vNum2;
vResult = ( typeof(vResult) + " , " + vResult );
console.log(vResult);
document.getElementById("ret4").innerHTML = vResult;
vNum1 = 1000;
vNum2 = "1000";
vResult = vNum1 * vNum2;
vResult = ( typeof(vResult) + " , " + vResult );
console.log(vResult);
document.getElementById("ret5").innerHTML = vResult;
vNum1 = 1000;
vNum2 = "1000";
vResult = vNum1 / vNum2;
vResult = ( typeof(vResult) + " , " + vResult );
console.log(vResult);
document.getElementById("ret6").innerHTML = vResult;
vNum1 = "1000";
vNum2 = "1000";
vResult = vNum1 + vNum2;
vResult = ( typeof(vResult) + " , " + vResult );
console.log(vResult);
document.getElementById("ret6").innerHTML = vResult;
vNum1 = 1000;
vNum2 = "1000";
vResult = vNum1 + vNum2;
vResult = ( typeof(vResult) + " , " + vResult );
console.log(vResult);
document.getElementById("ret6").innerHTML = vResult;
vNum1 = "1000";
vNum2 = 1000;
vResult = vNum1 + vNum2;
vResult = ( typeof(vResult) + " , " + vResult );
console.log(vResult);
document.getElementById("ret7").innerHTML = vResult;
console.log("----------");
</script>
</body>
</html>코드가 상당히 길지만 변수와 연산되는 부분만 보면 된다.
나머지는 화면에 출력하기 위한 명령어일 뿐이다.
숫자형태의 문자열을 이용하여 사칙연산을 하고 있다.
숫자 데이터와 숫자형태의 문자열을 사칙연산을 하고 있는 것을 볼 수 있다.
결과 화면을 보자.
자신의 생각과 맞는지 확인해 보자.
결과화면을 보면 숫자형태의 데이터가 숫자이든 문자열이든 계산이 되는 것을 볼 수 있다.
하지만 더하기 연산자를 만나면 엄격하게 문자열로써 연결되는 모습을 보여준다.
이것이 자바스크립트의 숫자형 데이터의 동작이다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 숫자 Infinity 무량대수 표현 javascript number (0) | 2021.11.30 |
|---|---|
| 자바스크립트 NaN 숫자가 아닙니다. javascript nan not a number (0) | 2021.11.30 |
| 자바스크립트 숫자 문자 관계 + 연산자는 더하기가 아니다. (0) | 2021.11.28 |
| 자바스크립트 숫자범위와 정밀도 정수형 최대 15자리 부동소수점 17자리 (0) | 2021.11.27 |
| 자바스크립트 숫자형 데이터 javascript numbers (0) | 2021.11.25 |
댓글