자바스크립트는 연산을 할 때 피연산자의 타입을 묵시적으로 변환해서 계산한다.
그러나 변수 값을 출력할 때처럼 명시적으로 타입을 변환해야 할 때도 있다.
[1] 숫자를 문자열로 변환하기
숫자 + 문자열
: 숫자 타입이 문자열로 바뀐다.
console.log(10 + "cookies"); // → "10cookies"
console.log(100 + ""); // → "100"
console.log(("0000" + 12).slice(-4)); // → "0012"
- 숫자 + 문자열
- 숫자 + 빈 문자열
- 앞부분에 0을 넣어 네자릿수 정수를 표현하는 문자열로 만듦
Number 객체의 메서드를 활용하는 방법
< 숫자의 타입을 문자열로 변환하는 Number 객체의 메서드 >
[wptb id=2427]var n = 26; console.log(n.toString()); // → "26" : 인수를 지정하지 않으면 10진수 문자열로 변환 console.log(n.toString(2)); // → "11010" : 2진수 문자열로 변환 console.log(n.toString(16)); // → "1a" : 16진수 문자열로 변환 console.log((26).toString(16)); // → "1a" : 숫자에서 바로 메서드를 사용하고자 할 때는 소괄호로 묶는다.
var x = 1234.567; console.log(x.toString()); // → "1234.567" console.log(x.toString(16)); // → "4d2.9126e978d5" console.log(x.toFixed(0)); // → "1235" console.log(x.toFixed(2)); // → "1234.57" console.log(x.toFixed(4)); // → "1234.5670" console.log(x.toExponential(3)); // → "1.235e+3" console.log(x.toPrecision(3)); // → "1.23e+3" console.log(x.toPrecision(6)); // → "1234.57"
String 함수를 활용하는 방법
- new String – String 객체를 생성하는 함수로 사용
- String – new 연산자가 없으면 일반적인 함수로 활용. 이때 반환값은 String 객체가 아닌 문자열. 즉 String 함수에 값을 전달하면 그 값(모든 데이터 타입)을 문자열로 바꾼다.
console.log(String(26)); // → "26"
console.log(String(1234.567)); // → "1234.567"
console.log(String(0x1a)); // → "26"
console.log(String("ABC")); // → "26"
console.log(String(true)); // → "true"
console.log(String(false)); // → "false"
console.log(String(NaN)); // → "NaN"
console.log(String(null)); // → "null"
console.log(String(undefined)); // → "undefined"
console.log(String({x:1, y:2})); // → "[object Object]"
console.log(String([1, 2, 3])); // → "1, 2, 3"
[2] 문자열을 숫자로 변환하기
수식 안에서 묵시적으로 변환하는 방법
아래의 2가지 방법을 사용해서 숫자를 뜻하는 문자열 타입을 묵시적으로 숫자 타입으로 바꿀 수 있다.
var s = "2"; console.log(s - 0); // → 2 console.log(+s); // → 2
parseInt와 parseFloat 함수를 사용하는 방법
- parseInt 함수, parseFloat 함수
- 문자열을 해석(parse)하여 숫자로 바꾸는 함수
- parseInt 함수 – 문자열을 정수로 변환
- parseFloat 함수 – 문자열을 부동소수점으로 변환
- 두 함수 모두 두 문자열의 첫 번째 문자를 숫자로 바꾼 값으로 반환하고, 이후에 등장하는 문자열은 무시한다.
- 첫번째 문자열을 숫자로 해석할 수 없을 때 : NaN 반환
- 문자열 앞부분이 “0x”나 “0X”로 시작할 때 : 16진수로 해석
- 문자열 앞부분에 있는 공백 문자는 무시
console.log(parseInt("3.14")); // → 3
console.log(parseFloat("3.14")); // → 3.14
console.log(parseInt("3.14 meters")); // → 3 : ①
console.log(parseFloat("3.14 meters")); // → 3.14 : ②
console.log(parseInt("0xFF")); // → 255 : ③
console.log(parseInt("0.5")); // → 0
console.log(parseInt(".5")); // → NaN : ④
console.log(parseInt("abc")); // → NaN : ⑤
console.log(parseFloat("\100")); // → NaN : ⑥
① 숫자 정수 다음에 등장하는 문자열은 무시
② 숫자 부동소수점 다음에 등장하는 문자열은 무시
③ 문자열 앞부분에 “0x”가 있으므로 16진수로 해석
④ 문자열 앞부분에 “.”이 있으므로 해석하지 않음
⑤ 숫자로 해석할 수 없음
⑥ 문자열 앞부분에 “\”가 있으므로 해석하지 않음
parseInt 함수의 두 번째 인수로 기수를 설정할 수 있다. 기수로는 2~36 사이 값을 지정할 수 있다.
console.log(parseInt("101", 2); // → 5 : 문자열을 2진수로 해석해서 변환
console.log(parseInt("ff", 16); // → 255 : 문자열을 16진수로 해석해서 변환
Number 함수를 활용하는 방법
- new Number – Number 객체를 생성하는 함수로 사용
- Number – new 연산자를 붙이지 않으면 일반 함수로 활용할 수 있다. 이때 반환값은 Number 객체가 아닌 숫자. Number 함수의 인수로 문자열(모든 데이터 타입)을 넘기면 정수 또는 부동소수점을 뜻하는 문자열을 숫자로 바꾼다. 단, 10진수만 처리할 수 있다.
console.log(Number("2.71828"); // → 2.71828
console.log(Number(123)); // → 123
console.log(Number(true)); // → 1
console.log(Number(false)); // → 0
console.log(Number(NaN)); // → NaN
console.log(Number(undefined)); // → NaN
console.log(Number(null)); // → 0
console.log(Number({x:1, y:2})); // → NaN
console.log(Number([1, 2, 3])); // → NaN
[3] 논리값으로 변환하기
< 논리 연산을 할 때의 타입 변환 >
[wptb id=2291]var x = 0; console.log(x); // → 0 console.log(!x); // → true console.log(!!x); // → false console.log(Boolean(x)); // → false
! 연산자는 논리 타입이 아닌 값의 타입을 논리 타입으로 바꾼다.
그 다음에 !를 하나 더 붙여서 참과 거짓을 뒤바꾸고 있다.
< 참고문헌 >
🔹주 참고문헌 : 모던 자바스크립트 입문 – 이소 히로시 지음, 서재원 옮김
🔹MDN Web Docs
